Javascript 如何在 AngularJs 中使用带有 ng-repeat 的正则表达式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12046928/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use Regex with ng-repeat in AngularJs?
提问by Vural
I want to use regex in ng-repeat. I have tried the following code but its not working.
我想在 ng-repeat 中使用正则表达式。我已经尝试了以下代码，但它不起作用。
<div ng-repeat="user in users | filter:{'type':/^c5$/}"></div>
I have users array and I only want to display the users with type c5.
我有用户数组，我只想显示类型为 c5 的用户。
If I use
如果我使用
filter:{'type':'c5'}
then its displaying the users with type "ac5x" too, because its contains c5.
然后它也显示类型为“ac5x”的用户，因为它包含c5。
How can I solve this problem? Maybe there is another solution.
我怎么解决这个问题？也许还有另一种解决方案。
Thank You!
谢谢你！
回答by Gloopy
What tosh mentions should work for you!
什么tosh提到应该对你有用！
If you find yourself wanting to filter by regex more often you can create a custom filter. Something like this fiddlewill let you specify a field to check against a regex:
如果您发现自己想要更频繁地通过正则表达式进行过滤，您可以创建一个自定义过滤器。像这个小提琴这样的东西会让你指定一个字段来检查正则表达式：
var myApp = angular.module('myApp', []);
myApp.filter('regex', function() {
return function(input, field, regex) {
var patt = new RegExp(regex);
var out = [];
for (var i = 0; i < input.length; i++){
if(patt.test(input[i][field]))
out.push(input[i]);
}
return out;
};
});
Used like this where 'type'indicates the field you are checking against (in this case a field named type):
像这样使用 where'type'指示您正在检查的字段（在本例中为名为 type 的字段）：
<div ng-repeat="user in users | regex:'type':'^c5$'"></div>
回答by Tosh
You can use function in filter expression. So basically, you can do any filtering possible with javascript.
您可以在过滤器表达式中使用函数。所以基本上，您可以使用 javascript 进行任何可能的过滤。
<li ng-repeat="name in names | filter:myFilter"> {{ name }}
In controller:
在控制器中：
$scope.myFilter = function(user) {
return /^c5$/.test(user.type);
};
回答by Iain529
Gloopy's answer is spot on. I implemented it in my site but I was getting an error,
Gloopy 的回答是正确的。我在我的网站上实现了它，但出现错误，
'input' is undefined
'input' is undefined
This occurred because I was sometimes looping over nothing. I fixed this by adding a conditional to return the empty out array if input was undefined.
发生这种情况是因为我有时会无所事事地循环。我通过添加一个条件来解决这个问题，如果输入未定义，则返回空的输出数组。
var myApp = angular.module('myApp', []);
myApp.filter('regex', function() {
return function(input, field, regex) {
var patt = new RegExp(regex);
var out = [];
if(input === undefined) {
return out;
}
for (var i = 0; i < input.length; i++){
if(patt.test(input[i][field]))
out.push(input[i]);
}
return out;
};
});
Hopefully this will help someone who might be having the same problem
希望这会帮助可能遇到同样问题的人
回答by Colin
Regular expressions are indeed powerful and can handle all kinds of matches including an exact match like ^c5$.
正则表达式确实很强大，可以处理各种匹配，包括像^c5$.
However, the body of this question reveals that the issue would be addressed by always filtering by exact matches.
但是，这个问题的正文表明，该问题将通过始终按完全匹配过滤来解决。
You can specify that the Angular filter should use the exact matchcomparator by setting the 3rd argument to true:
您可以通过将第三个参数设置为来指定 Angular 过滤器应使用精确匹配比较器true：
filter:{type:'c5'}:true
回答by nahualli
Thanks for the regex filter idea but the previous solutions do not work for a general case, like a object case where is a multi level fields.
感谢正则表达式过滤器的想法，但以前的解决方案不适用于一般情况，例如多级字段的对象情况。
For example:
例如：
<div ng-repeat="item in workers | regex:'meta.fullname.name':'^[r|R]' ">
My solution is:
我的解决办法是：
.filter('regex', function() {
return function(input, field, regex) {
var f, fields, i, j, out, patt;
if (input != null) {
patt = new RegExp(regex);
i = 0;
out = [];
while (i < input.length) {
fields = field.split('.').reverse();
j = input[i];
while (fields.length > 0) {
f = fields.pop();
j = j[f];
}
if (patt.test(j)) {
out.push(input[i]);
}
i++;
}
return out;
}
};
});
It works for multi level objects or simple object with just one level of attributes.
它适用于多级对象或只有一级属性的简单对象。
To late but hope it help you to see from different angle.
晚了，但希望它可以帮助您从不同的角度看。
This is the code in CoffeeScript, is cleaner:
这是 CoffeeScript 中的代码，更简洁：
angular.module('yourApp')
.filter 'regex', ->
(input, field, regex) ->
if input?
patt = new RegExp(regex)
i = 0
out = []
while i < input.length
fields = field.split('.').reverse()
j = input[i]
while fields.length > 0
f = fields.pop()
j = j[f]
if patt.test(j)
out.push input[i]
i++
return out
