Javascript 带参数的AngularJS自定义筛选器
我的自定义筛选器应输出： 标记 …但是它输出： M A. R K 以下是我的看法：Javascript 带参数的AngularJS自定义筛选器,javascript,angularjs,angularjs-filter,Javascript,Angularjs,Angularjs Filter,我的自定义筛选器应输出： 标记 …但是它输出： M A. R K 以下是我的看法： <body ng-controller="MainCtrl"> <ul> <li ng-repeat="friend in friends | myFriend:currentUser"> {{ friend }} </li> </ul> </body> …和控制器： var
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="friend in friends | myFriend:currentUser">
{{ friend }}
</li>
</ul>
</body>
var app = angular.module('plunker', []);
app.filter('myFriend', function () {
return function (items, currentUser) {
console.log(items);
console.log(currentUser);
for (var i = 0; i < items.length; i++) {
if (items[i] === currentUser) {
return items[i];
}
}
};
});
app.controller('MainCtrl', function($scope) {
$scope.currentUser = 'Mark';
$scope.friends = ['Andrew', 'Will', 'Mark', 'Alice', 'Todd'];
});
我的自定义筛选器如何标记输出？这是因为您正在从筛选器传递字符串，而不是字符串数组。ng repeat将遍历字符串，字符串是字符串标记的字符数组，并显示它。您需要将数组传递给ng repeat。在将源应用于ng repeat之前，先运行筛选器。 例如： 在您的特定情况下，无需创建任何自定义筛选器，也可以执行以下操作：
<li ng-repeat="friend in friends | filter:currentUser:true">
{{ friend }}
</li>
这是因为您正在从筛选器传递字符串，而不是字符串数组。ng repeat将遍历字符串，字符串是字符串标记的字符数组，并显示它。您需要将数组传递给ng repeat。在将源应用于ng repeat之前，先运行筛选器。 例如： 在您的特定情况下，无需创建任何自定义筛选器，也可以执行以下操作：
<li ng-repeat="friend in friends | filter:currentUser:true">
{{ friend }}
</li>
我想你知道这个过滤器正在应用于好友列表 您的筛选器正在返回单个字符串值 您的ng repeat可以被认为是：
ng-repeat="friend in (friends | myFriend:currentUser)"
<body ng-controller="MainCtrl">
<ul>
<li>
{{ friends | myFriend:currentUser }}
</li>
</ul>
</body>
我想你知道这个过滤器正在应用于好友列表 您的筛选器正在返回单个字符串值 您的ng repeat可以被认为是：
ng-repeat="friend in (friends | myFriend:currentUser)"
<body ng-controller="MainCtrl">
<ul>
<li>
{{ friends | myFriend:currentUser }}
</li>
</ul>
</body>
试试下面更新的过滤器。您返回的是字符串，而应该返回数组。这就是为什么ng repeat将该字符串视为数组并迭代每个字母的原因
app.filter('myFriend', function () {
return function (items, currentUser) {
console.log(items);
console.log(currentUser);
var finalItems = [];
for (var i = 0; i < items.length; i++) {
if (items[i] === currentUser) {
finalItems.push(items[i]);
}
}
return finalItems;
};
});
试试下面更新的过滤器。您返回的是字符串，而应该返回数组。这就是为什么ng repeat将该字符串视为数组并迭代每个字母的原因
app.filter('myFriend', function () {
return function (items, currentUser) {
console.log(items);
console.log(currentUser);
var finalItems = [];
for (var i = 0; i < items.length; i++) {
if (items[i] === currentUser) {
finalItems.push(items[i]);
}
}
return finalItems;
};
});
我的强烈建议是不要写额外的代码。这就像重新发明轮子。相反，坚持常规程序并过滤掉它。您的好友数组中的一个小更改将以最少的编码获得更好的结果。使用angular最小化编码
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="friend in friends | filter:{name:currentUser}">
{{ friend.name }}
</li>
</ul>
</body>
</html>
我的强烈建议是不要写额外的代码。这就像重新发明轮子。相反，坚持常规程序并过滤掉它。您的好友数组中的一个小更改将以最少的编码获得更好的结果。使用angular最小化编码
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="friend in friends | filter:{name:currentUser}">
{{ friend.name }}
</li>
</ul>
</body>
</html>