javascript - 我如何在angularjs中的ng-repeat上实现滑动过滤器

Question

我正在尝试实现一个简单的 Angular 滑动过滤器，但我的 ng-repeat 似乎没有响应

fiddle 在这里 http://jsfiddle.net/zn4b89n0/1/

我试过以下方法

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<div ng-app="myapp">
    <div ng-controller="TestController as vm">
        <p>Price 1: {{vm.priceSlider1.value}}</p>



     <rzslider rz-slider-model="vm.priceSlider1.value" rz-slider-floor="vm.priceSlider1.floor" rz-slider-ceil="vm.priceSlider1.ceil"></rzslider>


     <ul ng-repeat="friend in vm.friends  ">
      <li>{{friend.name | filter:filterFn}}</li>
    </ul>

    </div>
</div>

JS

var myApp = angular.module('myapp', ['rzModule', 'ui.bootstrap']);

myApp.controller('TestController', TestController);

function TestController($scope, $timeout) {
    var vm = this;
     vm.priceSlider1 = {
        floor: 80,
        ceil: 100,
        value: 85
    };

    vm.friends = [
    { name: "Peter",   age: 20 },
    { name: "Pablo",   age: 55 },
    { name: "Linda",   age: 20 },
    { name: "Marta",   age: 37 },
    { name: "Othello", age: 20 },
    { name: "Markus",  age: 32 }
  ];

    vm.filterFn = function(friend)
        {
            // Do some tests

            if(friend.age >= vm.priceSlider1.value )
            {
                return true; // this will be listed in the results
            }

            return false; // otherwise it won't be within the results
        };


    vm.refreshSlider = function () {
        $timeout(function () {
            $scope.$broadcast('rzSliderForceRender');
        });
    };
}

我如何让它工作，感谢您的所有帮助

Answer 1

您应该在 ng-repeat 中使用过滤器并执行过滤器:

<ul ng-repeat="friend in vm.friends | filter: vm.filterFn() ">
      <li>{{friend.name}}</li>
</ul>

可以简化过滤函数:

vm.filterFn = function()
    {
        return function(item){
            //return the whether age attribute of each item (friend) is greater than your value
            return item['age'] >= vm.priceSlider1.value;
        }
    };

在这里您可以尝试更新的 fiddle :http://jsfiddle.net/Ln9cgrve/

希望这能解决您的问题...