AngularJS在范围内的过滤

Question

AngularJS在范围内的过滤

angularjsangularjs-ng-repeatangular-filtersrangeslider

6

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

如何让它只在时间在指定范围内时显示项目？

- Daimz

1

你可以使用 ng-show 结合范围条件来包装你的项目。我修改了你的示例以演示我的意思 - http://codepen.io/anon/pen/ApvcF - miqh

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Digital Fu · Accepted Answer

将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;
    };
});

希望它能帮助到你。