Фильтр массива angular.js на основе диапазона

У меня есть массив angular.js из 3 продуктов и ползунок диапазона, который составляет от 0 - 20 с шагом 1. Мне нужно сделать это, так как я сдвигаю слайдер диапазона, он будет фильтровать мой массив и показывать только продукты с свойством height, которое подходит для этой категории.Фильтр массива angular.js на основе диапазона

т.е.: фильтрация 0 до 10 будет показывать что-либо с высотой 0, 1, 2, 3, 5, 6, 7, 8, 9, 10.

Это не обязательно для моего вопроса, но если бы можно было добавить inches в конце значения, я был бы признателен за эту помощь.

Мой HTML только основной регулятор диапазона настройки:

<body ng-controller="MainCtrl" style="min-height: 600px" > 

    <div style="background-color: #808080;margin-left: 50px;margin-right: 50px; padding: 30px;"> 

    <pre>{{ priceSlider | json }}</pre> 

    <rzslider 
     rz-slider-floor="priceSlider.floor" 
     rz-slider-ceil="priceSlider.ceil" 
     rz-slider-model="priceSlider.min" 
     rz-slider-high="priceSlider.max" 
     rz-slider-step="{{priceSlider.step}}"></rzslider> 

     <div class="info" ng-repeat="p in products"> 
       {{p.name}} 
       {{p.height}} 
      </div> 

    </div> 
    </body>

My App.js // приложение

var app = angular.module('plunker', ['rzModule']); 

app.controller('MainCtrl', function($scope) { 

    $scope.priceSlider = { 
    min: 0, 
    max: 20, 
    ceil: 20, 
    floor: 0, 
    step: 1 
    }; 

$scope.products = [ 
     { 
      name: 'one', 
         height: '00' 
        }, 
      { 
      name: 'two', 
         height: '10' 
        }, 
      { 
      name: 'three', 
         height: '20' 
        } 
    ]; 

});

Поскольку я должен позвонить в некоторые за пределами источников и имеют тонну css в этом случае, вот codepen link

Я пытался решить это в течение нескольких дней, и начинаю сомневаться, даже если это возможно! Спасибо за помощь заранее!

источник

2015-03-13 knocked loose

Добавьте следующую функцию в контроллере:

$scope.minFilter = function (p) { 
     return p.height >= $scope.priceSlider.min; 
    }; 

    $scope.maxFilter = function (p) { 
     return p.height <= $scope.priceSlider.max; 
    };

Затем использовать эти фильтры в вашей нг-повтора:

<div class="info" ng-repeat="p in products | filter:minFilter | filter:maxFilter ">

См: http://codepen.io/anon/pen/GgYzze

источник

2015-03-13 14:14:00 Sam

Не все герои носят плащи: ') –

Вы должны написать свой собственный AngularJS filter чтобы добиться этого.

В вашем Javascript

app.filter('onlyProductsWithinHeights', function(){ 
    return function(products, minHeight, maxHeight){ 
     var filtered = []; 
     angular.forEach(products, function(product){ 
      if(product.height >= minHeight && product.height <= maxHeight) 
       filtered.push(product); 
     }); 
     return filtered; 
    }; 
};

в разметке

<div class="info" ng-repeat="p in products | onlyProductsWithinHeights:priceSlider.min:priceSlider.max"> 
    {{p.name}} 
    {{p.height}} 
</div>

источник

2015-03-13 14:16:17

я знал, что это будет пользовательский фильтр, я не был уверен, как скажите, чтобы он отображался только между минимальной и максимальной высотой –

Фильтр массива angular.js на основе диапазона

ответ

Смежные вопросы