AngularJS过滤器（对象和多个值）不起作用答案

【问题标题】：AngularJS filter (object and multiple values) not workingAngularJS过滤器（对象和多个值）不起作用
【发布时间】：2020-01-31 00:58:52
【问题描述】：

所以我得到了一个使用 AngularJS 和 UI-Router 的项目，我遍历了一个 json，它有一个名为“state”的属性，这是我想用作过滤器的属性，但是，我将使用一个“选择器” " 在这里我可以选择“全部”或特定的。

我是 AngularJS 的新手所以不确定到底是什么不工作，这是我到目前为止的代码：

function filterState (installment){
    switch(selectedValue) {
        case 1:
            if(installment.state === 'PAID'){
                return installment;
            }
            break;
        case 2:
            if(installment.state === 'LATE'){
                return installment;
            }
            break;
        case 3:
            if(installment.state === 'PENDING'){
                return installment;
            }
            break;
        default:
            return installment;
    }

但是过滤器没有正常工作我是这样称呼它的：

<div class="row" ng-repeat="installment in vm.clients.installments | filter: filterState">

当我按过滤器之类的值手动过滤时，不确定到底是什么错误：{state:'PAID'} 有效

【问题讨论】：

什么是selectedValue？你有select 控件吗？
那么 selectedValue 在这种情况下并不真正相关，我现在使用的是硬编码变量。
您想使用下拉列表的选定值进行过滤？

标签： angularjs angular-ui-router angularjs-filter

【解决方案1】：

过滤器函数返回一个迭代器函数。像回调。请查看以下示例。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.criteria = { name: 'Bob'};

  $scope.criteriaMatch = function( criteria ) {
    return function( item ) {
      return item.name === criteria.name;
    };
  };

  $scope.items =[
    { name: 'Bob'},
    { name: 'Alice'}
  ];
});

<div ng-repeat="item in items | filter:criteriaMatch(criteria)">
  {{ item }}
</div>

http://plnkr.co/edit/vtNjEgmpItqxX5fdwtPi?p=preview

信用：匿名

【讨论】：

【解决方案2】：

显然我需要返回一个布尔值而不是对象，我之前确实尝试过，但我的另一个问题是我在执行之后直接调用函数而不是执行 vm.function（一旦传递给上下文）它起作用了。

【讨论】：

【解决方案3】：

如果您需要使用选择选项进行过滤，则可以执行以下操作：

<select name="select" id="select" ng-model="clients.status">
    <option value="PAID">PAID</option>
    <option value="LATE">LATE</option>
    <option value="PENDING">PENDING</option>
    <option value="ALL">ALL</option>
</select>
<div class="row" ng-repeat="installment in clients.installments | filter: filterState">
    {{installment.id}}
</div>

以及在控制器中过滤的功能：

$scope.filterState = function(installment) {
    if ($scope.clients.status === 'ALL') return true;
    return $scope.clients.status === installment.status;
};

选项ALL @时，它会显示列表的所有项目

在此处查看工作演示：DEMO

【讨论】：