0

我正在关注这篇很棒的帖子：如何使用多个链接在 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）？

谢谢

4

1 回答 1

8

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

将控制器声明移到最顶部的 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

于 2014-02-24T03:48:23.520 回答