Почему мой фильтр не работает

Я делаю фильтр по цене, мой код JS ниже

 (function () {
    'use strict';

    angular
        .module('beo.products.controllers')
        .controller('ProductsListController', ProductsListController);

    ProductsListController.$inject = ['$scope', '$http', '$routeParams'];



        activate();

        function activate() {

            $http.get('api/v1/products/').success(function (data) {
                $scope.products = data;
                $scope.filterPriceFrom = 0;
                $scope.filterPriceTo = 200000;


                $("#ex2").slider({
                       range: true,
                       min: 0,
                       max: 200000,
                       values: [0, 200000],
                       slide: function (event, ui) {
                           var from = $("#price-from");
                           from.val(ui.values[0]);
                           var to = $("#price-to");
                           to.val(ui.values[1]);
                           var scope = angular.element($("#html")).scope(); //где #app_dom_id айди div в котором указан ng-app.
                           scope.$apply(function () {
                              scope.byPrice(ui.values[0], ui.values[1]);
                           });
                       }
                   });


                            $scope.byPrice = function (minValue, maxValue) {

                                return function predicateFunc(product) {
                                    if (product.price >= minValue && product.price <= maxValue) {
                                        return product
                                    } else {
                                        return null;
                                    }
                                };
                            };
    });
    )();

html, в котором я создаю слайдер для фильтрации продуктов по цене:

Введите описание изображения здесь

 <div initpriceslider class="filter-content filter-price" ng-class="{opened: pctrl.spoilers.priceFilter}">
            <div class="filter-wraper">
                <div class="price-label">
                    <input type="text" id="price-from" name="price-from" ng-model="filterPriceFrom" readonly>
                    <input type="text" id="price-to" name="price-to" ng-model="filterPriceTo" readonly>
                </div>
                 <div id="ex2" class="price-input"></div>
            </div>
        </div>

фильтр я использую как эти:

 <div class="catalog-item" ng-repeat="product in products | filter: byPrice( filterPriceFrom, filterPriceTo)  |orderBy:ProductSortLeft">
</div>

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

1 ответ

  1. $scope.applyКод в функции slider должен обновлять $scopeпеременную, а не вызывать byPrice()ее.

    scope.$apply(function () {
        scope.minValue = ui.values[0];
        scope.maxValue = ui.values[1];
    });
    

    Функция фильтра должна возвращать значение trueor false, которое либо показывает, либо скрывает его, когда на него ссылается ng-repeatдиректива.

    $scope.byPrice = function (item) {
        if (item.price >= scope.minValue && item.price <= scope.maxValue) {
            return true
        } else {
            return false;
        }
    };
    

    Или вы можете использовать ng-showи ng-hideдинамически показывать или скрывать элементы на основе того же теста.