我有一個ng重複遍歷文檔，我想要執行「| filter：search」，但希望過濾器在文檔中的特定字段上運行。多個字段上的Ng重複過濾器
我發現了一對夫婦的例子，只是不起作用。
（我有一個模型=搜索的輸入字段）...
他們說你針對特定領域的方式是這樣的：
<div ng-repeat="x in data | filter({first_name:search,last_name:search })">{{x.first_name}} {{x.last_name}}</div>
我記得在過去做的事情和我認爲這很接近，但並不完全。
任何幫助？
<div ng-repeat="obj in objs | filter:filterFn">{{obj.name}}</div>
see this is the function : filterFn
$scope.filterFn = function(elm)
{
if($scope.filterlocation[elm.location])
{
return true;
}
return false;
};
// Code goes here
(function(){
var myApp = angular.module('myApp',['angular.filter']);
myApp.controller('myCtrl', function($scope){
var vm= this;
vm.x = 20;
vm.tableData = [
{
first_name: 'Programmer',
last_name: '21',
},{
first_name: 'Abc',
last_name: 'Xyz'
},{
first_name: 'Kunvar',
last_name: 'Singh'
},{
first_name: 'Cnak',
last_name: '2'
}
];
})
})();<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="[email protected]" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script data-require="[email protected]" data-semver="0.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.2/angular-filter.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl as vm">
<input type="text" placeholder="enter your search text" ng-model="vm.searchText" />
<table>
<tr ng-repeat="row in vm.tableData | filterBy: ['first_name','last_name']: vm.searchText">
<td>{{row.first_name}}</td>
<td>{{row.last_name}}</td>
</tr>
</table>
<p>This will show filter from <b>two columns</b> only(first_name and last_name) . Not from all. Whatever columns you add into filter array they
will be searched. all columns will be used by default if you use <b>filter: vm.searchText</b></p>
</body>
</html>。這是一個表來搜索eachColumn和用於在輸入所有所有colums一個例子。 繼承人的例子 - >pnlkr 所有可以在視圖中完成。 HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as rchCtrl">
<div>
<label>Search</label>
<input ng-model="searchAll">
<hr>
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>AGE</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input ng-model="searchID">
</td>
<td>
<input ng-model="searchName">
</td>
<td>
<input ng-model="searchAge">
</td>
</tr>
<tr ng-repeat="item in peoples |filter: {id:searchID, name:searchName, age:searchAge} | filter:searchAll">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
控制器
var app = angular.module('plunker', ['ngAnimate']);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.peoples = [
{id:1, name:'Kalesi', age:50},
{id:2, name:'Jon', age:43},
{id:3, name:'Jonas', age:34},
{id:4, name:'Sam', age:29},
{id:5, name:'Samuel', age:50},
{id:6, name:'Tyrion', age:20}
];
});
X在數據|過濾器：{first_name：search，last_name：search}這是正確的語法 – Fetrarij