我已经建立了一系列滑块范围介于0 - 2小时,该时间已经分钟进行计算,然后转换为HH:MM是这样的:10分钟,20分钟,1小时20分钟,2小时
I have set up a range slider that ranges from 0 - 2hr, the times are calculated in mins then converted to hh:mm like this: 10min, 20min, 1hr 20min, 2hr.
但现在我想筛选一堆利用范围滑尺指定的范围内里面的物品NG-重复的,我有一个很难得到这方面的工作
But now I am trying to filter a bunch of items inside the ng-repeat using the range specified by the range slider and I am having a hard time getting this working.
下面是我做了什么 cdpn.io/LDusa
我使用 danielcrisp.github.io/angular-rangeslider/demo/ ,在范围滑块。
这里是code:
var app = angular.module('myApp', ['ui-rangeSlider']); app.controller('myCtrl', function ($scope) { $scope.sliderConfig = { min: 0, max: 120, step: 10, userMin: 0, userMax: 30 }; $scope.times = [ {"time": "20"}, {"time": "50"}, {"time": "30"}, {"time": "10"}, {"time": "85"}, {"time": "75"}, {"time": "95"}, {"time": "100"}, {"time": "80"}, {"time": "200"}, {"time": "260"}, {"time": "120"}, {"time": "62"}, {"time": "68"}, {"time": "5"}, {"time": "116"} ]; }); app.filter('customFilter', function () { return function (value) { var h = parseInt(value / 60); var m = parseInt(value % 60); var hStr = (h > 0) ? h + 'hr' : ''; var mStr = (m > 0) ? m + 'min' : ''; var glue = (hStr && mStr) ? ' ' : ''; return hStr + glue + mStr; }; }); app.filter('range', function() { return function(input, min, max) { min = parseInt(min); max = parseInt(max); for (var i=min; i<=max; i++) input.push(i); return input; }; });JADE(如果你preFER HTML,您可以在使用此 html2jade/ )
div(ng-app="myApp") div(ng-controller='myCtrl') div(range-slider='', pin-handle='min', attach-handle-values='', prevent-equal-min-max='', step='{{sliderConfig.step}}', min='sliderConfig.min', max='sliderConfig.max', model-min='sliderConfig.userMin', model-max='sliderConfig.userMax', filter='customFilter') div(range-slider, prevent-equal-min-max='', attach-handle-values='', min='sliderConfig.min', max='sliderConfig.max', model-min='sliderConfig.userMin', model-max='sliderConfig.userMax', filter='customFilter') div(ng-repeat="time in times | range:sliderConfig.userMin:sliderConfig.userMax") | {{ item.time | customFilter }}我怎样才能得到这个工作,所以它只会显示项目时,时间在范围滑块指定的范围内?
How can I get this working so it will only display items when time is within the range specified in the range slider?
推荐答案传递sliderConfig进入过滤器来查找范围滑尺当前的最小值和最大值设置。确保你的对象是在数组中。
Pass the sliderConfig into the filter to find the current min and max set on the range slider. Make sure your objects are in an array.
<div range-slider="range-slider" min="sliderConfig.min" max="sliderConfig.max" model-min="sliderConfig.userMin" model-max="sliderConfig.userMax"> </div> ... // Pass the slider config into the filter <div ng-repeat="time in times | rangeFilter:sliderConfig"> {{ time.time | customFilter}} </div> ... $scope.times = [ {time: '20'}, {time: '50'}, ... ];该rangeFilter有第二个参数rangeInfo,我们可以从拿到2的值。
The rangeFilter has the second parameter 'rangeInfo' which we can get the 2 values from.
app.filter('rangeFilter', function() { return function( items, rangeInfo ) { var filtered = []; var min = parseInt(rangeInfo.userMin); var max = parseInt(rangeInfo.userMax); // If time is with the range angular.forEach(items, function(item) { if( item.time >= min && item.time <= max ) { filtered.push(item); } }); return filtered; }; });希望它帮助。
更多推荐
AngularJS一系列的过滤
发布评论