Angularjs custom filter not working

Question

I am trying to filter elements based on the range. I am using two controllers & $rootScope broadcast-on approach to retrieve the min-max range of a slider & sharing it with the other controller.

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);
    };
});

I tried debugging, the filter works fine but it won't reflect in the template.

What exactly do you mean by "it won't reflect in the template"? Your $scope.min and $scope.max are initially set to a range that should lead to all $scope.elements being returned from the filter. Have you considered that $scope.min and $scope.max might simply not be watched and therefore your template never updates, even if you manipulate the slider? Second, the self-assignment to array inside your filter (array = array.filter(...);) seems slightly suspicious to me. Have you tried simply returning array.filter(...); directly? — stakx - no longer contributing
– stakx - no longer contributing, Commented Mar 23, 2017 at 21:41
The second point was the bug. I removed the assignment & it works perfectly! Thank you so much :) — Abhishek
– Abhishek, Commented Mar 23, 2017 at 21:52

stakx - no longer contributing · Accepted Answer · 2017-03-24 08:15:05Z

2

The self-assignment to array inside your filter (array = array.filter(…);) seems slightly suspicious to me. Have you tried simply returning array.filter(…); directly?

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

edited Mar 24, 2017 at 8:15

answered Mar 23, 2017 at 21:55

stakx - no longer contributing

85.1k20 gold badges176 silver badges277 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs custom filter not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related