范围之间的AngularJS过滤 [英] AngularJS filtering between a range

问题描述

我设置了一个范围为 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 = {分钟:0，最大:120，步骤:10，用户最小:0，用户最大:30};$scope.times = [{时间":20"}，{时间":50"}，{时间":30"}，{时间":10"}，{时间":85"}，{时间":75"}，{时间":95"}，{时间":100"}，{时间":80"}，{"time": "200"},{时间":260"}，{时间":120"}，{时间":62"}，{时间":68"}，{时间":5"}，{时间":116"}];});app.filter('customFilter', function () {返回函数(值){var h = parseInt(value/60);var m = parseInt(value % 60);var hStr = (h > 0) ?h + 'hr' : '';var mStr = (m > 0) ?m + '分钟' : '';var 胶水 = (hStr && mStr) ?' ' : '';返回 hStr + 胶水 + mStr；};});app.filter('range', function() {返回函数(输入，最小值，最大值){min = parseInt(min);最大 = parseInt(max);for (var i=min; i<=max; i++)input.push(i);返回输入；};});

JADE(如果你更喜欢 HTML，你可以使用这个 http://html2jade.org/):

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 |自定义过滤器 }}

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

解决方案

将 sliderConfig 传递到过滤器中以查找当前设置在范围滑块上的最小值和最大值.确保您的对象在一个数组中.

 
...//将滑块配置传递给过滤器<div ng-repeat="time in times | rangeFilter:sliderConfig">{{ 时间.时间 |自定义过滤器}}

...$scope.times = [{时间:'20'}，{时间:'50'}，...];

rangeFilter 有第二个参数rangeInfo"，我们可以从中获取 2 个值.

app.filter('rangeFilter', function() {返回函数(项目，范围信息){var 过滤 = [];var min = parseInt(rangeInfo.userMin);var max = parseInt(rangeInfo.userMax);//如果时间在范围内angular.forEach(项目，功能(项目){if( item.time >= min && item.time <= max ) {过滤.推(项目)；}});返回过滤；};});

希望有帮助.

I have set up a range slider that ranges from 0 - 2hr, the times are calculated in mins then converted to hh:mm like this: 10min, 20min, 1hr 20min, 2hr.

But now I am trying to filter a bunch of items inside the ng-repeat using the range specified by the range slider and I am having a hard time getting this working.

Here is what I have done http://cdpn.io/LDusa

I am using http://danielcrisp.github.io/angular-rangeslider/demo/ for the range slider.

And here is the code:

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(If you prefer HTML you can convert it back to html using this http://html2jade.org/):

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 }}

How can I get this working so it will only display items when time is within the range specified in the range slider?

解决方案

Pass the sliderConfig into the filter to find the current min and max set on the range slider. Make sure your objects are in an array.

    <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'},
      ...
    ];

The rangeFilter has the second parameter 'rangeInfo' which we can get the 2 values from.

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

Hope it helps.

这篇关于范围之间的AngularJS过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！