我已经设置了一个范围滑块,范围是0-2hr,时间以分钟为单位计算,然后像这样转换为hh:mm:10min,20min,1hr 20min,2hr。
但是现在我正在尝试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, 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 }}
我如何才能使其正常工作,以便仅time
在范围滑块指定的范围内时才显示项目?
将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;
};
});
希望能帮助到你。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句