為什么我的過濾器不起作用

Question

我按價格過濾，我的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>

我的問題是過濾器中的價值轉移不起作用，請告訴我我在哪里犯了錯誤

Answer 1

您在slider函數中的$scope.apply代碼應該更新$scope變量，而不是調用byPrice()函數。

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

您的過濾器函數應返回true或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根據同一測試動態顯示或隱藏元素。