为什么我的过滤器不起作用答案

【问题标题】：Why my filter doesn't work为什么我的过滤器不起作用
【发布时间】：2016-05-02 22:32:02
【问题描述】：

我按价格过滤，我的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;
                                    }
                                };
                            };
    });
    )();

我在其中创建了一个按价格过滤产品的滑块：

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

我的问题是过滤器中的值传递不起作用，请告诉我我在哪里犯了错误

【问题讨论】：

标签： javascript jquery angularjs jquery-ui

【解决方案1】：

滑块函数中的$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 根据相同的测试动态显示或隐藏元素。

【讨论】：