AngularJS在一个范围之间过滤

发布时间：2020-12-17 07:53:47 所属栏目：安全来源：网络整理

导读：我设置了一个范围滑块,范围从0到2小时,时间以分钟计算,然后转换为hh：mm,如下：10分钟,20分钟,1小时20分钟,2小时. 但是现在我正在尝试使用范围滑块指定的范围来过滤ng-repeat内的一堆项目,我很难完成这项工作. 这就是我所做的http://cdpn.io/LDusa 我使用htt

我设置了一个范围滑块,范围从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;
    };
});

希望能帮助到你.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!