Question

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>

Answer 1

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

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

希望有所帮助：）

Answer 2

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

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

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

3 个答案: