我设置了一个范围滑块,范围从0到2小时,时间以分钟计算,然后转换为hh:mm,如下:10分钟,20分钟,1小时20分钟,2小时.
但是现在我正在尝试使用范围滑块指定的范围来过滤ng-repeat内的一堆项目,我很难完成这项工作.
这就是我所做的http://cdpn.io/LDusa
我使用http://danielcrisp.github.io/angular-rangeslider/demo/作为范围滑块.
这是代码:
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(如果您更喜欢HTML,可以使用此http://html2jade.org/将其转换回html):
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,filter='customFilter') div(ng-repeat="time in times | range:sliderConfig.userMin:sliderConfig.userMax") | {{ item.time | customFilter }}
我怎样才能使这个工作,所以当时间在范围滑块中指定的范围内时,它只显示项目?
将sliderConfig传递给过滤器,以查找范围滑块上的当前最小和最大设置.确保您的对象在数组中.
<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个值.
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; }; });
希望能帮助到你.