Angularjs自定义过滤器不起作用答案

【问题标题】：Angularjs custom filter not workingAngularjs自定义过滤器不起作用
【发布时间】：2017-08-16 16:19:02
【问题描述】：

我正在尝试根据范围过滤元素。我正在使用两个控制器和$rootScope 广播方法来检索滑块的最小-最大范围并与另一个控制器共享它。

HTML-

<body ng-app="myApp">
<div ng-controller="RangeController as vm">
    <rzslider rz-slider-model="vm.slider.minValue" rz-slider-high="vm.slider.maxValue" rz-slider-options="vm.slider.options"></rzslider>
</div>
<div ng-controller="SampleController">
    <div ng-repeat="x in elements | inRange:min:max">
        {{x}}
    </div>
</div>
</body>

AngularJS-

var app = angular.module('myApp', ['rzModule']);
app.controller('SampleController', function($scope,$rootScope) {
    $scope.min = 1500;
    $scope.max = 5500;
    $scope.elements = [1530,2100,2780,3323,3420,4680,5020,5300,5402];

    $scope.$on('MIN_PRICE', function(response) {
        $scope.min = minPrice;
    })

    $scope.$on('MAX_PRICE', function(response) {
        $scope.max = maxPrice;
    })
});

app.value('minPrice',1500);
app.value('maxPrice',5500);

app.controller('RangeController', RangeController);
function RangeController($scope,$rootScope) {
    var vm = this;
    vm.changeListener = function() {
        minPrice = vm.slider.minValue;
        maxPrice = vm.slider.maxValue;
        console.log(minPrice + " " +maxPrice);
        $rootScope.$broadcast('MIN_PRICE', minPrice);
        $rootScope.$broadcast('MAX_PRICE', maxPrice);
    };

    vm.slider = {
        minValue: 1500,
        maxValue: 5500,
        options: {
            floor: 1500,
            ceil: 5500,
            step: 500,
            translate: function(value) {
                return '₹' + value;
            },
            onChange:vm.changeListener
        }
    }   
}   

app.filter('inRange', function() {
    return function(array, min, max) {
        array = array.filter(function(element) {
            return (element >= min && element <= max);
        });
        console.log(array);
    };
});

我尝试调试，过滤器工作正常，但不会反映在模板中。

【问题讨论】：

“它不会反映在模板中”到底是什么意思？您的 $scope.min 和 $scope.max 最初设置为应该导致所有 $scope.elements 从过滤器返回的范围。您是否考虑过 $scope.min 和 $scope.max 可能根本不会被观看，因此即使您操纵滑块，您的模板也不会更新？其次，在您的过滤器 (array = array.filter(...);) 中对 array 的自我分配对我来说似乎有点可疑。您是否尝试过直接返回array.filter(...);？
第二点是bug。我删除了作业，它完美地工作！非常感谢:)

标签： html angularjs angularjs-filter angularjs-slider

【解决方案1】：

在您的过滤器 (array = array.filter(…);) 中对 array 的自分配对我来说似乎有点可疑。您是否尝试过直接返回array.filter(…);？

app.filter('inRange', function() {
    return function(array, min, max) {
        return array.filter(function(element) {
            return (element >= min && element <= max);
        });
    };
});

【讨论】：