在Angular中,有没有办法修改过滤器,使其只返回完全匹配?
例:
var words = [
{ title: "ball" },
{ title: "wall" },
{ title: "all" },
{ title: "alloy" }
];
var wordsFiltered = filter('filter')
(
words,
{
'title': 'all'
}
);
Run Code Online (Sandbox Code Playgroud)
以上将匹配'球','墙','所有'和'合金'.但我希望它只匹配'全部'.有什么方法可以改变吗?
Ste*_*wie 19
从AngularJS v.1.1.3开始,本机提供了精确过滤:
Find words that exactly match title:
<input ng-model="match.title" />
<br>
and exactly match type:
<input ng-model="match.type" />
<hr>
<table>
<tr ng-repeat="word in words | filter:match:true">
<td>{{word.title}}</td>
</tr>
</table>
Run Code Online (Sandbox Code Playgroud)
你的问题意味着你想要匹配多个对象属性,所以这里有一个过滤器来做到这一点:
app.controller('AppController',
[
'$scope',
function($scope) {
$scope.match = {};
$scope.words = [
{ title: "ball", type: 'object' },
{ title: "wall", type: 'object' },
{ title: "all", type: 'word' },
{ title: "alloy", type: 'material' }
];
}
]
);
app.filter('exact', function(){
return function(items, match){
var matching = [], matches, falsely = true;
// Return the items unchanged if all filtering attributes are falsy
angular.forEach(match, function(value, key){
falsely = falsely && !value;
});
if(falsely){
return items;
}
angular.forEach(items, function(item){ // e.g. { title: "ball" }
matches = true;
angular.forEach(match, function(value, key){ // e.g. 'all', 'title'
if(!!value){ // do not compare if value is empty
matches = matches && (item[key] === value);
}
});
if(matches){
matching.push(item);
}
});
return matching;
}
});
Run Code Online (Sandbox Code Playgroud)
<body ng-controller="AppController">
Find words that exactly match title:
<input ng-model="match.title" />
<br>
and exactly match type:
<input ng-model="match.type" />
<hr>
<table>
<tr ng-repeat="word in words | exact:match">
<td>{{word.title}}</td>
</tr>
</table>
</body>
Run Code Online (Sandbox Code Playgroud)
小智 9
试试这个 :
var words = [
{ title: "ball" },
{ title: "wall" },
{ title: "all" },
{ title: "alloy" }
];
var wordsFiltered = filter('filter')
(
words,
{
'title': 'all'
},
true
);
Run Code Online (Sandbox Code Playgroud)
我会创建一个新的过滤器。这是你想要的吗?
超文本标记语言
<div ng-controller="MyCtrl">
{{words | exactMatch:'all'}} !
</div>
Run Code Online (Sandbox Code Playgroud)
JavaScript
var myApp = angular.module('myApp',[]);
myApp.filter('exactMatch', function() {
return function(words, pattern) {
var result = [];
words.forEach(function (word) {
if (word.title === pattern) {
result.push(word);
}
});
return result;
}
});
function MyCtrl($scope) {
$scope.words = [
{title: "ball", other: 1},
{title: "wall", other: 2},
{title: "all", other: 3},
{title: "alloy", other: 4},
{title: "all", other: 5},
];
}
Run Code Online (Sandbox Code Playgroud)
JsFiddle:jsfiddle
有关自定义过滤器的更多信息:过滤器、创建自定义过滤器和使用过滤器
如果你想在 Javascript 中使用过滤器而不是 html,你应该看这里:jsfiddle