[英]Advanced AngularJS custom filtering on ngRepeat objects
I want to achieve the following theoretical code: 我想实现以下理论代码:
VIEW.html VIEW.html
<li ng-repeat="player in players | filter:myCustomFilter(player)">{{player.name}}
CONTROLLER.js CONTROLLER.js
// some theoretical conditional statement that return a boolean
$scope.otherCondition = true;
$scope.myCustomFilter = function(player) {
return player.name.substring(0,1).match(/A/gi) && $scope.otherCondition;
}
So I want all of my players to be loaded into an Angular model, but I only want to render players into the DOM whose names start with the letter 'A'. 所以我希望所有玩家都加载到Angular模型中,但我只想将玩家渲染到名称以字母“A”开头的DOM中。 When I try and do something like this, my console informs me that
player
is undefined. 当我尝试做这样的事情时,我的控制台告诉我
player
未定义。 Do I need to write a custom filter in order to achieve this (via angular.module().filter()
)? 我是否需要编写自定义过滤器才能实现此目的(通过
angular.module().filter()
)?
Here's a working fiddle: http://jsfiddle.net/orlenko/jV6DK/ 这是一个工作小提琴: http : //jsfiddle.net/orlenko/jV6DK/
Html code (exactly as Karl Zilles suggested): Html代码(正如Karl Zilles建议的那样):
<div ng-app>
<div ng-controller="MyController">
<h2>Names starting with "A":</h2>
<ul>
<li ng-repeat="player in players | filter:myCustomFilter">{{player.name}}</li>
</ul>
<h2>All Names:</h2>
<ul>
<li ng-repeat="player in players">{{player.name}}</li>
</ul>
</div>
</div>
Javascript: 使用Javascript:
function MyController($scope) {
$scope.players = [{
name: 'Arthur'
}, {
name: 'William'
}, {
name: 'Bertha'
}, {
name: 'Alice'
}];
$scope.otherCondition = true;
$scope.myCustomFilter = function(player) {
return player.name.substring(0,1).match(/A/gi) && $scope.otherCondition;
}
}
You don't need to pass player to the filter 您无需将播放器传递给过滤器
<li ng-repeat="player in players | filter:myCustomFilter">{{player.name}}
Should work 应该管用
The answers given are only partially correct, if you need to pass more arguments to the function you would need to create a closure and pass those arguments to the closure as follow: 给出的答案只是部分正确,如果你需要传递更多的参数来创建一个闭包并将这些参数传递给闭包,如下所示:
The 'A'
is passed to the closure and player
is passed as a part of the context. 'A'
传递给闭包, player
作为上下文的一部分传递。
HTML: HTML:
<div ng-app>
<div ng-controller="MyController">
<h2>Names starting with "A":</h2>
<ul>
<li ng-repeat="player in players | filter:myCustomFilter('A')">{{player.name}}</li>
</ul>
<h2>All Names:</h2>
<ul>
<li ng-repeat="player in players">{{player.name}}</li>
</ul>
</div>
</div>
JS: JS:
function MyController($scope) {
$scope.players = [{
name: 'Arthur'
}, {
name: 'William'
}, {
name: 'Bertha'
}, {
name: 'Alice'
}];
$scope.otherCondition = true;
$scope.myCustomFilter = function(letter) {
return function(player) {
var rgxp = new RegExp(letter, "g");
return player.name.substring(0, 1).match(rgxp) && $scope.otherCondition;
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.