AngularJS在范围之间过滤

Posted 2023-02-18

【中文标题】AngularJS在范围之间过滤

【英文标题】：AngularJS filtering between a range

【发布时间】：2014-07-06 21:03:24

【问题描述】：

我设置了一个范围从 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 

我怎样才能让它工作，以便它只在time 在范围滑块中指定的范围内时显示项目？

【问题讨论】：

您可以使用ng-show 结合范围条件来包装您的项目。我修改了你的例子来说明我的意思 - codepen.io/anon/pen/ApvcF

【参考方案1】：

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

希望对你有帮助。

【讨论】：

这很好用，我只有一个问题。是否可以使用多个范围滑块进行这项工作。我试图实现这个cdpn.io/LDusa，但我不确定如何在 ng-repeat 上设置过滤器，因为它在 rangeFilter 中调用了sliderConfig。我想我需要一些如何将 secondTimeConfig 与 SliderConfig 结合，但我不确定。

我在答案中添加了一些额外的信息

使用 2 个范围滑块的想法是，如果我开始在 20 分钟 - 1 小时 20 分钟范围内过滤时间，那么我使用第二个范围滑块来查找在 20 分钟 - 1 小时 20 分钟范围内具有“秒时间”的项目' 在 10 分钟 - 100 分钟之间。当我使用第二个滑块时，我不想覆盖第一个滑块，我希望它们都能够相互过滤信息。看起来您正在检查 maxOne 和 maxTwo 是否不同，然后根据它进行过滤。而且我不确定这是否会像我想要的那样工作。如果我错了，请纠正我，因为我想学习。

试过了，但我无法让它工作。 cdpn.io/LDusa 我也从 JADE 更改为 HTML，以防你会发现它更容易。

现在更有意义了。 plnkr.co/edit/j5nrgw8vD0NepvvzJcyO?p=preview