angularjs – 使用ng重复过滤多列

发布时间：2020-12-17 07:49:39 所属栏目：安全来源：网络整理

导读：我想知道在Angular中是否有一个简单的方法来使用或逻辑而不是使用ng-repeat过滤表.现在,我的过滤器正在搜索表中的所有内容(10列数据),当它只需要过滤2列数据(ID和名称)时. 过滤(by using an object in the filter expression as per the docs和查看this SO a

我想知道在Angular中是否有一个简单的方法来使用或逻辑而不是使用ng-repeat过滤表.现在,我的过滤器正在搜索表中的所有内容(10列数据),当它只需要过滤2列数据(ID和名称)时.

过滤(by using an object in the filter expression as per the docs和查看this SO answer),我已经设法找到这些2列,但它的用法和逻辑太过于具体.我想让它使用或逻辑,但有麻烦.

我的HTML

<input type="text" ng-model="filterText" />
<table>
      <tr ng-repeat="item in data"><td>{{ item.id }}</td><td>{{ item.name }}</td>...</tr>
</table>

我的过滤逻辑：

$filter(‘filter’)(data,{id：$scope.filterText,name：$scope.filterText})

过滤工作,但是再次,它正在采取匹配的列而不是联合.谢谢！

创建自定义过滤器不难,您可以根据需要拥有尽可能多的参数.以下是一个具有一个和两个参数的过滤器的示例,但您可以根据需要添加多个参数.

示例JS：

var app = angular.module('myApp',[]);
app.filter('myTableFilter',function(){
  // Just add arguments to your HTML separated by :
  // And add them as parameters here,for example:
  // return function(dataArray,searchTerm,argumentTwo,argumentThree) {
  return function(dataArray,searchTerm) {
      // If no array is given,exit.
      if (!dataArray) {
          return;
      }
      // If no search term exists,return the array unfiltered.
      else if (!searchTerm) {
          return dataArray;
      }
      // Otherwise,continue.
      else {
           // Convert filter text to lower case.
           var term = searchTerm.toLowerCase();
           // Return the array and filter it by looking for any occurrences of the search term in each items id or name. 
           return dataArray.filter(function(item){
              var termInId = item.id.toLowerCase().indexOf(term) > -1;
              var termInName = item.name.toLowerCase().indexOf(term) > -1;
              return termInId || termInName;
           });
      } 
  }    
});

然后在你的HTML中

<tr ng-repeat="item in data | myTableFilter:filterText">

或者如果要使用多个参数：

<tr ng-repeat="item in data | myTableFilter:filterText:argumentTwo:argumentThree">

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!