帶有參數的AngularJS自定義過濾器
[英]AngularJS Custom Filter with Argument
問題描述
我的自定義過濾器應輸出：
標記
...但是它輸出：
- 中號
- 一種
- [R
- ķ
這是我的看法：
<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'];
});
這是我的Plunker： http ://plnkr.co/edit/JCKAt05MPlrvIZBCGO0n?p=preview
我的自定義過濾器如何輸出“標記”？
4 個解決方案
解決方案1
2 2015-07-07 21:47:44
那是因為您要從過濾器傳遞一個字符串，而不是字符串數組。 ng-repeat將遍歷字符串Mark的字符（字符串是一個字符數組）並顯示它。 您需要改為將數組傳遞給ng-repeat 。 在將source應用於ng-repeat之前，首先運行Filter。 例：
for (var i = 0; i < items.length; i++) {
if (items[i] === currentUser) {
return [items[i]];
}
}
在您的特定情況下，您可以執行以下操作，而無需創建任何自定義過濾器：
<li ng-repeat="friend in friends | filter:currentUser:true">
{{ friend }}
</li>
解決方案2
1 已采納 2015-07-07 21:55:08
我想您知道過濾器已應用於列表好友。
您的過濾器返回一個字符串值。
您的ng-repeat可以認為是：
ng-repeat="friend in (friends | myFriend:currentUser)"
這意味着您試圖遍歷myFriend過濾器返回的字符串。 對於瀏覽器，您在字符串上使用ng-repeat會遍歷字符串中的每個字符。
（注意：這可能不會在每種瀏覽器上都發生，因為某些瀏覽器（例如IE7） 不允許在字符串上使用[]下標 。（在所有這些下面，ng-repeat都依賴於具有length屬性和[]下標的值。）
以下內容可能會產生所需的結果（假設您只希望從列表中顯示一個名稱）
<body ng-controller="MainCtrl">
<ul>
<li>
{{ friends | myFriend:currentUser }}
</li>
</ul>
</body>
解決方案3
1 2015-07-07 22:45:43
我的強烈建議是不要編寫額外的代碼。 就像重新發明輪子一樣。 相反，請遵循一般步驟並將其過濾掉。 在friends數組中進行很小的更改將以最少的編碼獲得更好的結果。 使用角度最小化您的編碼。
<!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>
app.js
app.controller('MainCtrl', function($scope) {
$scope.currentUser = 'Mark';
$scope.friends = [{'name':'Andrew'}, {'name':'Will'}, {'name':'Mark'}, {'name':'Alice'}, {'name':'Todd'}];
});
解決方案4
0 2015-07-07 21:59:33
請嘗試以下更新的過濾器。 您正在返回String，而您應該返回一個數組。 這就是為什么ng-repeat將String視為數組並迭代每個字母的原因。
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;
};
});
Angularjs。如何將變量作為參數傳遞給自定義過濾器？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.