我如何在 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

看起来像 ngRepeat 部分的问题。应该是

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

注意，过滤器在 ngRepeat 指令中，过滤器函数也应称为 vm.filterFn。

Answer 2

您应该在 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/

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

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

How do i implement a sliding filter on ng-repeat in angularjs

javascript

angularjs

ng-repeat