Фильтр ng-repeat на ползунке диапазона angular js

Я использую слайдер rangle в своем проекте. я хочу отфильтровать ng-repeat при скольжении ползунка диапазона. я хочу отфильтровать данные по цене. мой код html: -

<range-slider min="slider.min" max="slider.max" step="slider.step" lower-value="slider.min" upper-value="slider.max"></range-slider>
 <div ng-repeat="data in data|filter:rangeFilter()">
    Property: {{data.name}}
    price: {{data.price}}
 </div>

контроллер:-

$scope.data = [{

                 name : hoarding1,
                 price : 50000

                },
                {

                 name : hoarding2,
                 price : 50000

                },
                {

                 name : hoarding3,
                 price : 50000

                }
               ]

$scope.slider = {

    step : 10000,
    min : Math.min.apply(Math,$scope.data.map(function(item){return item.price;})),
    max : Math.max.apply(Math,$scope.data.map(function(item){return item.price;}))

}
$scope.rangeSlider = function (){

 return function( items, rangeInfo ) {
    var filtered = [];
    var min = parseInt(rangeInfo.min);
    var max = parseInt(rangeInfo.max);
    // If time is with the range
    angular.forEach(items, function(item) {
        if( item.price >= min && item.price <= max ) {
            filtered.push(item);
        }
    });
    return filtered;
};

это не работает для меня. Помогите мне, пожалуйста :-(


filter angularjs rangeslider
person Ranjith M    schedule 29.01.2016    source источник
comment
Извините, это не активы, это данные, которые я предоставил @Vlad Dekhanov   -  person Ranjith M    schedule 29.01.2016
comment
Не могли бы вы поделиться содержимым вашего объекта rangeFilter?   -  person Vlad Dekhanov    schedule 29.01.2016
comment
не могли бы вы уточнить, вы хотите отфильтровать объект, который имеет только цену? что такое rangeFilter   -  person Shushanth Pallegar    schedule 29.01.2016
comment
$scope.rangeSlider = function (){ функция возврата (элементы, rangeInfo) { var filtered = []; var min = parseInt(rangeInfo.min); var max = parseInt(rangeInfo.max); // Если время указано в диапазоне angular.forEach(items, function(item) { if( item.price ›= min && item.price ‹= max ) { filtered.push(item); } }); возврат отфильтрованный; };   -  person Ranjith M    schedule 29.01.2016
comment
Извините, но ваш пример не объясняет, что такое rangeFilter   -  person Vlad Dekhanov    schedule 29.01.2016
comment
я должен показать данные через фильтр диапазона по цене @Vlad Dekhanov   -  person Ranjith M    schedule 29.01.2016
comment
Возможно, вы перепутали свои «rangeFilter» и «rangeSlider», но даже если бы вы изменили его на одно имя, вы бы использовали его неправильно.   -  person Vlad Dekhanov    schedule 29.01.2016
comment
rangeFilter означает, что я хочу отфильтровать элементы данных ng-repeat в ч/б выборе ползунка диапазона в соответствии с ценой в наборе данных @shushanth p   -  person Ranjith M    schedule 29.01.2016

Ответы (2)


arrow_upward
2
arrow_downward

Я думаю, вам нужен собственный фильтр, который фильтрует по определенной цене и показывает конкретный товар, который имеет границу фильтра по цене, см. Код ниже

контроллер:

$scope.rangeInfo = {
    min : Math.min.apply(Math,$scope.data.map(function(item){return item.price;})),
    max : Math.max.apply(Math,$scope.data.map(function(item){return item.price;}))
  }

шаблон:

<div ng-repeat="data in data | priceRange:rangeInfo">
    Property: {{data.name}}
    price: {{data.price}}

 </div>

фильтр

вы можете использовать метод массива forEach или метод фильтра массива (ES5)

app.filter('priceRange',function(){
  return function(arrayItems,rangeInfo){
     return arrayItems.filter(function(item){
       console.log(item.price);
       return (item.price > rangeInfo.min && item.price < rangeInfo.max);
     }); 
    } 
  });

Метод фильтрации ES2015 (ES6) с использованием стрелочных функций

   app.filter('priceRange',function(){

      return function(arrayItems,rangeInfo){

         return arrayItems.filter((item) => (item.price > rangeInfo.min && item.price < rangeInfo.max));
      }

});

https://plnkr.co/edit/JQgcEsW4NIaAwDVAcfy0?p=preview

person Shushanth Pallegar    schedule 29.01.2016
comment
@ Ранджит, конечно! , нет проблем . Я рад, что это сработало для вас. - person Shushanth Pallegar; 29.01.2016

arrow_upward
0
arrow_downward

Если вы собираетесь реализовать свой собственный фильтр, вам следует проверить информацию здесь https://docs.angularjs.org/tutorial/step_09

После создания собственного фильтра вы должны использовать его, как показано ниже:

<div ng-repeat="data in data | customFilterName">

Примечание: я предлагаю вам не использовать имя для каждого экземпляра данных, например data. Возможно, было бы лучше 'item in data' или что-то в этом роде.

person Vlad Dekhanov    schedule 29.01.2016