Question

我正在尝试以角度方式实现一个简单的滑动过滤器，但是我的ng-repeat看起来并没有响应

我试过以下

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

在这里，您可以尝试更新的小提琴：http://jsfiddle.net/Ln9cgrve/

我希望能解决你的问题...

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

2 个答案: