在Angularjs应用程序中，基于多个属性进行AND操作的ng-repeat过滤。

Question

我在我的AngularJS应用程序中有以下JSON对象数组。

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

我有一个搜索表单，可以在输入文本框中输入代码，以根据代码搜索客户端。因此，我在ng repeat上应用了一个过滤器，针对属性code进行过滤，这个过滤器工作得很好。

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

现在我需要添加两个输入字段的搜索表单，即name和role，其模型分别为clientSearch.clientName和clientSearch.clieRole。应该在对象的name属性上过滤clientSearch.clientName，并在对象的role属性上使用AND操作基于输入字段过滤clientSearch.clieRole。例如，如果在相应的输入框中输入了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：'',      clientName：'',      clientRole：'' }

有谁能帮助我以简单和通用的方式解决这个过滤问题？

- smart987

---

请查看以下帖子： https://dev59.com/zWMk5IYBdhLWcg3w-Spm - Max Novich

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。

- Vivek

---

vvk，你的简单解决方案很好用，但问题出现在ng-if="clientSearch.clientCode"上。只有在输入字段非空且匹配相关搜索文本时，才应该显示搜索结果。我已将其更改为ng-if="clientSearch"，但默认情况下所有列表都会出现，这不是我想要的。也许我在问题中没有强调这一点，但我也需要它能够正确地工作。 - smart987

只要其中一个条件非空且符合筛选条件，才应显示客户列表。我尝试使用 <tbody ng-if="clientSearch.clientCode || clientSearch.clientName || clientSearch.clientRole "> ，但默认情况下，即使三个输入字段都为空，所有列表也会显示出来。 - smart987

在控制器中，我已经初始化了我的搜索模型，它们是$scope.clientSearch = { clientCode :'', clientName : '', clientRole : '' }。 - smart987

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>

- Jerry Chen

---

Jerry，我已经编辑了我的问题，考虑到ng-if条件。你能否在你的解决方案中也包含这个功能？ - smart987

你需要编写一个方法来检查是否显示你的表格。在控制器中，你可能需要将 $scope.clientSearch.clientName 和其他变量设置为默认值 ""，以避免未定义的问题。 - Jerry Chen

Answer 3

我认为最优雅的方法是创建一个自定义过滤器（而不是在HTML中使用多个过滤器或条件）：

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">

- Yaron Schwimmer