ng-repeat过滤器或者等于名字或姓氏

in angularJs有没有办法通过匹配两个或多个字段来过滤ng-repeat？例如，我想列出所有名字或姓氏中带有字母“J”的人。如果我使用当前函数它列出谁拥有被搜索匹配字符在这两个名字字母“J”和姓ng-repeat过滤器或者等于名字或姓氏

<!DOCTYPE html> 
<html ng-app="myApp"> 

<head> 
    <meta name="format-detection" content="telephone=no"> 
    <meta name="msapplication-tap-highlight" content="no"> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 
    <title>Welcome To My Homepage</title> 
    <link href="css/style.css" rel="stylesheet" /> 
    <link href="css/bootstrap.min.css" rel="stylesheet" /> 
</head> 

<body ng-controller="MyCtrl"> 
    <div ng-controller="MyCtrl"> 
     <input type="text" ng-model="search">{{search}} 
     <table border="1"> 
      <tr ng-repeat="row in list | filter:{firstName:search} | filter:{lastName:search}"> 
       <td>{{row.firstName}} {{row.lastName}}</td> 
      </tr> 
     </table> 
    </div> 


    <script src="js/jquery-2.2.1.js"></script> 
    <script src="js/angular.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script type="text/javascript"> 

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

     myApp.controller('MyCtrl', ['$scope','$http','$filter', function($scope,$http,$filter) { 


      $scope.list = [{ 
        "id": 1, 
        "address": "New York City", 
        "firstName": "Jennifer", 
        "middleName": null, 
        "lastName": "Aniston" 
        }, { 
         "id": 1, 
         "address": "New York City", 
         "firstName": "Jennifer", 
         "middleName": null, 
         "lastName": "Leela" 
        }, { 
         "id": 2, 
         "address": "Beverley Hills", 
         "firstName": "Angelina", 
         "middleName": null, 
         "lastName": "Jolie" 
        }, { 
        "id": 3, 
        "address": "London", 
        "firstName": "Emma", 
        "middleName": null, 
        "lastName": "Watson" 
      }]; 


     }]); 
    </script> 

</html>

来源

2017-06-07 shinjo77

您需要创建过滤器定制的[自定义过滤器（https://stackoverflow.com/questions/15868248/how-to-filter-multiple-values-or-operation-in-angularjs） – Naimad

是，自定义过滤器是这种情况下的最佳解决方案！ –

<input type="text" ng-model="search.$">，通过这一点，过滤器中的任何财产的人。

因此，一旦将其过滤为<tr ng-repeat="row in list | filter:search">

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

 
myApp.controller('MyCtrl', ['$scope', '$http', '$filter', function($scope, $http, $filter) { 
 

 

 
    $scope.list = [{ 
 
    "id": 1, 
 
    "address": "New York City", 
 
    "firstName": "Jennifer", 
 
    "middleName": null, 
 
    "lastName": "Aniston" 
 
    }, { 
 
    "id": 1, 
 
    "address": "New York City", 
 
    "firstName": "Jennifer", 
 
    "middleName": null, 
 
    "lastName": "Leela" 
 
    }, { 
 
    "id": 2, 
 
    "address": "Beverley Hills", 
 
    "firstName": "Angelina", 
 
    "middleName": null, 
 
    "lastName": "Jolie" 
 
    }, { 
 
    "id": 3, 
 
    "address": "London", 
 
    "firstName": "Emma", 
 
    "middleName": null, 
 
    "lastName": "Watson" 
 
    }]; 
 

 

 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<html ng-app="myApp"> 
 

 
<body ng-controller="MyCtrl"> 
 
    <div ng-controller="MyCtrl"> 
 
    <input type="text" ng-model="search.$">{{search}} 
 
    <table border="1"> 
 
     <tr ng-repeat="row in list | filter:search"> 
 
     <td>{{row.firstName}} {{row.lastName}}</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 

 
</html>

来源

2017-06-07 08:09:41 Sajal

好的解决方案，知道的非常有用！ – rrd

是的，你可以创建自定义过滤器，如下面的一个。我目前使用它的相同情形:)

(function() { 
'use strict'; 

angular 
    .module('myApp') 
    .filter('tableFilter', tableFilter); 

function tableFilter() { 
    // Just add arguments to your HTML separated by : 
    // And add them as parameters here, for example: 

    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 firstName or lastName. 
      return dataArray.filter(function (object) { 
       var termInFirstName = object.firstName.toLowerCase().indexOf(term) > -1; 
       var termInLastName = object.lastName.toLowerCase().indexOf(term) > -1; 
       return termInFirstName || termInLastName; 
      }); 
     } 
    } 
    } 
})();

然后，你可以简单地在你的HTML中使用这样的：

<div ng-controller="MyCtrl"> 
    <input type="text" ng-model="search">{{search}} 
    <table border="1"> 
     <tr ng-repeat="row in list | tableFilter:search"> 
      <td>{{row.firstName}} {{row.lastName}}</td> 
     </tr> 
    </table> 
</div>

希望它能帮助:)

来源

2017-06-07 08:10:54

更改模型与此，ng-model="search.$"

var myApp = angular.module('myApp',[]); 
 
myApp.controller('MyCtrl', ['$scope','$http','$filter', function($scope,$http,$filter) { 
 
      $scope.list = [{ 
 
        "id": 1, 
 
        "address": "New York City", 
 
        "firstName": "Jennifer", 
 
        "middleName": null, 
 
        "lastName": "Aniston" 
 
        }, { 
 
         "id": 1, 
 
         "address": "New York City", 
 
         "firstName": "Jennifer", 
 
         "middleName": null, 
 
         "lastName": "Leela" 
 
        }, { 
 
         "id": 2, 
 
         "address": "Beverley Hills", 
 
         "firstName": "Angelina", 
 
         "middleName": null, 
 
         "lastName": "Jolie" 
 
        }, { 
 
        "id": 3, 
 
        "address": "London", 
 
        "firstName": "Emma", 
 
        "middleName": null, 
 
        "lastName": "Watson" 
 
      }]; 
 
      
 
$scope.myFilter = function (item) { 
 
    return item === 'red' || item === 'blue'; 
 
}; 
 
}]);

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 

 
<head> 
 
    <meta name="format-detection" content="telephone=no"> 
 
    <meta name="msapplication-tap-highlight" content="no"> 
 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 
 
    <title>Welcome To My Homepage</title> 
 
    <link href="css/style.css" rel="stylesheet" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet" /> 
 
</head> 
 

 
<body ng-controller="MyCtrl"> 
 
    <div ng-controller="MyCtrl"> 
 
    <input type="text" ng-model="search.$"> 
 
    <table border="1"> 
 
     <tr ng-repeat="row in list | filter:search"> 
 
     <td>{{row.firstName}} {{row.lastName}}</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 

 
</body> 
 
</html>

来源

2017-06-07 08:14:30 Sajeetharan

在此之前，我给了几分钟相同的解决方案:) – Sajal

是啊！错过了：） – Sajeetharan

ng-repeat过滤器或者等于名字或姓氏

回答

相关问题