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過濾器或者等於名字或姓氏

回答

相關問題