Angularjs ng-click显示由多个参数过滤的数据

Question

我正在关注这篇文章:如何使用多个链接过滤AngularJS中的列表

现在我想在点击时显示由多个参数过滤的数据.

HTML

<div ng-app>
  <span ng-click="myFilter = {type: 1}">Type 1</span> | 
  <span ng-click="myFilter = {type: 2}">Type 2</span> |
  <span ng-click="myFilter = {type: 3}">Type 3</span> |
  <!-- multiple filter - not working -->
  <span ng-click="myFilter = [{type: 1}, {type:3}]">Types 1 & 3</span> |
  <span ng-click="myFilter = null">No filter</span>
  <ul ng-controller="Test">
    <li ng-repeat="person in persons | filter:myFilter">{{person.name}}</li>
  </ul>
</div>

JS

function Test($scope) {
  $scope.persons = [{type: 1, name: 'Caio'}, {type:2, name: 'Ary'}, {type:1, name: 'Camila'}, , {type:3, name: 'Daniel'}];
}

多参数过滤器示例不起作用.有没有一种简单而通用的方法来实现这一点,而无需编写自定义过滤器？

我更新了jsfiddle:http://jsfiddle.net/pkxPa/89/

任何的想法 ？也许有更好的方法,比如使用ng-show(就像在这篇文章中:在ng-repeat中显示ng-click中隐藏的div)？

谢谢

Answer 1

我已经更新了plunkr(http://jsfiddle.net/pkxPa/91/)来修复一些小错误并演示如何使用自定义函数来完成它.不幸的是,我不认为有一种方法可以像你尝试的那样内联.

将控制器decleration移动到最顶层的div

<div ng-app ng-controller="Test">
  <span ng-click="myFilter = {type: 1}">Type 1</span> | 
  <span ng-click="myFilter = {type: 2}">Type 2</span> |
  <span ng-click="myFilter = {type: 3}">Type 3</span> |
  <!-- multiple filter - not working -->
  <span ng-click="myFilter = myFunction">Types 1 & 3</span> |
  <span ng-click="myFilter = null">No filter</span>
  <ul >
    <li ng-repeat="person in persons | filter:myFilter">{{person.name}}</li>
  </ul>
</div>

从您的人员数组中删除了导致未定义对象并添加了自定义过滤器的重复逗号

    function Test($scope) {
          $scope.persons = [{type: 1, name: 'Caio'}, {type:2, name: 'Ary'}, 
{type:1, name: 'Camila'}, {type:3, name: 'Daniel'}];
            $scope.myFunction = function(val) {

            return (val.type != 2);
            };
        }

有关详细信息,请参阅AngularJS文档http://docs.angularjs.org/api/ng/filter/filter