0

I am new to AngularJS & I am using angular-slider for specifying a price range. I want to display the only elements specified by the range.

Here's the AngularJS Code-

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

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

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

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">
        {{x}}
    </div>
</div>

I think it can be done using filters but I am not sure. Any Solutions?

Community
  • 1
  • 1
Abhishek
  • 95
  • 1
  • 1
  • 8

1 Answers1

1

You can write a Custom AngularJS filter for this.

angular.module('myModule', [])
   .filter('inRange', function() {
        return function(array, min, max) {
            array = array.filter(function(element) {
                 return element >= min && element <= max;
            });
         };
    });
});

<div ng-repeat="x in elements | inRange:vm.slider.minValue:vm.slider.maxValue">
Buh Buh
  • 7,443
  • 1
  • 34
  • 61
Ben
  • 2,441
  • 1
  • 12
  • 16
  • I tried but it didn't work. Probably due to controllers being different? I only defined the filter in 'myApp' instead of creating a new one. – Abhishek Mar 23 '17 at 19:44
  • Ah yes -- sorry. I just noticed `elements` and `minValue` / `maxValue` are in different controllers. Try moving elements into your other controller or find a way to share the data between controllers if you need to (perhaps through a service). – Ben Mar 23 '17 at 19:49
  • 1
    Thanks. I'll try angularjs service. – Abhishek Mar 23 '17 at 20:00