具有相同值Angularjs的多个过滤器

时间:2017-03-07 16:49:28

标签: angularjs json filter angularjs-ng-repeat

我有一个像这样的JSON对象

$scope.list = [{
    "ID": 1,
    "Name": "NAME1",
    "Category": "Category1",
    "Code": "Code1"
}, {
    "ID": 2,
    "Name": "NAME2",
    "Category": "Category1",
    "Code": "Code2"
}, {
    "ID": 3,
    "Name": "NAME3",
    "Category": "Category1",
    "Code": "Code3"
}, {
    "ID": 4,
    "Name": "NAME4",
    "Category": "Category3",
    "Code": "Code4"
}, {
    "ID": 5,
    "Name": "NAME5",
    "Category": "Category3",
    "Code": "Code5"
}]

我只有一个输入。我想过滤ng repetive指令只使用值类似于“Name”或“Category”属性的对象。我怎样才能做到这一点?例如:

<input type="text" ng-model="searchText">
<div ng-repeat="obj in list | filter:{Name:searchText.name}"
| filter:{Category:searchText.category}">

</div>

我不想通过Code propertyie进行搜索。 感谢

1 个答案:

答案 0 :(得分:0)

您可以拥有模型变量并将其用于过滤器,

<强>样本

angular.module('myApp', [])
  .controller('myCtrl', function($scope){
    
 $scope.list = [{
    "ID": 1,
    "Name": "NAME1",
    "Category": "Category1",
    "Code": "Code1"
}, {
    "ID": 2,
    "Name": "NAME2",
    "Category": "Category1",
    "Code": "Code2"
}, {
    "ID": 3,
    "Name": "NAME3",
    "Category": "Category1",
    "Code": "Code3"
}, {
    "ID": 4,
    "Name": "NAME4",
    "Category": "Category3",
    "Code": "Code4"
}, {
    "ID": 5,
    "Name": "NAME5",
    "Category": "Category3",
    "Code": "Code5"
}];
  $scope.search = function (row) {
    return (angular.lowercase(row.Name).indexOf($scope.searchText || '') !== -1 || angular.lowercase(row.Category).indexOf($scope.searchText || '') !== -1);
};
});
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-controller='myCtrl'>
    Search: <input ng-model="searchText">
  <table id="searchTextResults">
<tr><th>Name</th><th>Category</th></tr>
<tr ng-repeat="item in list | filter:search">
  <td>{{item.Name}}</td>
  <td>{{item.Category}}</td>
</tr>
  </table>

</body>
</html>