Question

我的angularjs应用程序中有以下json对象数组。

$scope.clients = [ {  
  "code": "FREG",
  "name": "Feranget",
  "role": "employee" 
},
{  
  "code": "CRTE",
  "name": "Crenart",
  "role": "admin" 
},
{  
  "code": "DERT",
  "name": "Derta",
  "role": "admin" 
} ]

我有搜索表单，我可以在put文本框中输入代码，根据代码在此客户端中搜索。所以我在属性code上应用了ng重复过滤器，这很好。

<tbody ng-if="clientSearch.clientCode">
    <tr ng-repeat="client in clients | filter:{ code: clientSearch.clientCode }">
</tbody>

现在，我需要支持包含两个输入字段的搜索表单，name和role的模型为clientSearch.clientName和clientSearch.clieRole。 clientSearch.clientName应在对象的name属性上进行过滤，clientSearch.clieRole应根据输入fileds以role操作对对象的AND属性进行过滤，即，如果在相应的输入框中输入code和role，则应根据code和role筛选出客户端，但name过滤器应为被忽略，因为它是空的。如果还在输入框中输入name，则应根据code和role以及name过滤客户端。对于过滤器，应忽略基本为空的字段，并且应在具有AND操作的过滤客户端列表中应用所有非空字段。

此处我使用了条件<tbody ng-if="clientSearch.clientCode">，因此默认情况下，当输入字段clientCode为空时，客户列表不会显示，只有在输入的文本与搜索条件匹配时才会显示。需要在所有三个输入字段clientSearch.clientName，clientSearch.clieRole和clientSearch.clientCode中维护此功能。当我用<tbody ng-if="clientSearch">替换它时，默认情况下它无法正常显示所有客户端列表

在我的控制器中，我的输入模型已初始化，如下所示：

$ scope.clientSearch = { clientCode：＆＃39;＆＃39;， clientName：＆＃39;＆＃39;， clientRole：＆＃39;＆＃39; }

任何人都可以帮助我以简单和一致的方式解决这个过滤问题。

Answer 1

您可以在过滤器中传递多个字段

<tbody ng-if="(clientSearch.clientCode !=null && clientSearch.clientCode !='') || (clientSearch.clientName !=null && clientSearch.clientName !='') || (clientSearch.clientRole !=null && clientSearch.clientRole !='')">
    <tr ng-repeat="client in clients | filter:{ code: clientSearch.clientCode, name: clientSearch.clientName}">
</tbody>

如果您传递多个字段进行过滤，则在过滤时将使用AND操作。

参见示例：http://plnkr.co/edit/kozaU39E74yqjZCpgDqM?p=preview

Answer 2

编写自定义过滤器，

app.filter('filterbyNameRoleCode', function(){
      return function(items,name,role,code){
         var filtered = [];

         for (var i = 0; i < items.length; i++) {

         if (itmes[i].name.indexof(name)> -1 && itmes[i].role.indexof(role)> -1 && itmes[i].code.indexof(code)> -1 ) {
          filtered.push(items[i]);
        };
      };
    } 
    return filtered;

});

然后使用它

<tbody ng-if="show(clientSearch)">
<tr ng-repeat="client in clients | filterbyNameRoleCode:clientSearch.clientName:clientSearch.clientRole:clientSearch.clientCode }">
</tbody>

Answer 3

我认为最优雅的方式（不使用HTML中的多个过滤器或条件），将创建custom filter：

yourApp.filter('customFilter', function() {
  return function (input, obj) {
    if (/* test that input complies with your conditions obj */) {
      return true;
    }
    return false;
  };
});

HTML：

<tr ng-repeat="client in clients | customFilter:clientSearch">

使用Angularjs应用程序中的AND操作过滤基于重复的多个属性

3 个答案: