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

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

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

1 个答案: