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

【问题标题】：ng-repeat filter either equals to first name or last nameng-repeat 过滤器等于名字或姓氏
【发布时间】：2017-06-07 16:20:07
【问题描述】：

在 angularJs 中有没有办法通过匹配两个或多个字段来过滤 ng-repeat？例如，我想列出名字或姓氏中包含字母“J”的所有人。如果我使用当前函数，它会列出名字和姓氏都有字母“J”的人

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

【问题讨论】：

您需要创建过滤器自定义Custom Filter
是的，在这种情况下自定义过滤器是最好的解决方案！

标签： angularjs angularjs-ng-repeat angularjs-filter

【解决方案1】：

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

【讨论】：

很好的解决方案，知道非常有用！
完美。简单的解决方案。

【解决方案2】：

是的，您可以创建一个自定义过滤器，如下所示。我目前正在将它用于相同的情况:)

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

希望对你有帮助:)

【讨论】：

【解决方案3】：

用这个改变你的模型，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>

【讨论】：

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