Question

我是AngularJS＆amp;我使用angular-slider来指定价格范围。我想显示范围指定的唯一元素。

这是 AngularJS代码 -

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>

我认为可以使用过滤器完成，但我不确定。任何解决方案？

Answer 1

你可以为此写一个Custom AngularJS filter。

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

Angularjs Price Range Slider基于Min-Max动态操作内容

1 个答案: