如何在AngularJs中使用带有ng repeat的Regex
How to use Regex with ng-repeat in AngularJs?
我想在ng repeat中使用regex。我尝试过以下代码,但不起作用。
<div ng-repeat="user in users | filter:{'type':/^c5$/}"></div>
我有users数组,我只想显示类型为c5的用户。
如果我使用
filter:{'type':'c5'}
然后它也显示类型为"ac5x"的用户,因为它包含c5。
我该如何解决这个问题?也许还有另一种解决方案。
谢谢!
托什提到的应该对你有用!
如果您发现自己想更频繁地使用regex进行筛选,您可以创建一个自定义筛选器。像这样的fiddle可以让你指定一个字段来检查正则表达式:
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;
};
});
像这样使用,其中'type'
表示您要检查的字段(在本例中是一个名为type的字段):
<div ng-repeat="user in users | regex:'type':'^c5$'"></div>
您可以在过滤器表达式中使用函数。因此,基本上,您可以使用javascript进行任何可能的过滤。
<li ng-repeat="name in names | filter:myFilter"> {{ name }}
控制器内:
$scope.myFilter = function(user) {
return /^c5$/.test(user.type);
};
正则表达式确实很强大,可以处理各种匹配,包括像^c5$
这样的精确匹配。
然而,这个问题的主体表明,这个问题将通过始终按精确匹配进行筛选来解决。
您可以通过将第三个参数设置为true
:来指定Angular过滤器应使用精确匹配比较器
filter:{type:'c5'}:true
Gloopy的答案很准确。我在我的网站上实现了它,但我遇到了一个错误:
'input' is undefined
发生这种情况是因为我有时什么都不做。我通过添加一个条件来解决这个问题,如果input
未定义,则返回空的out
数组。
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;
};
});
希望这能帮助那些可能有同样问题的人。
感谢regex过滤器的想法,但以前的解决方案不适用于一般情况,比如对象情况下的多级字段。
例如:
<div ng-repeat="item in workers | regex:'meta.fullname.name':'^[r|R]' ">
我的解决方案是:
.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;
}
};
});
它适用于多级对象或仅具有一级属性的简单对象。
迟到了,但希望它能帮助你从不同的角度看问题。
这是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
相关文章:
- ng init中的表达式无法使用ng repeat
- Angular ng repeat order将多个字段作为一个字段
- 访问ng repeat中的第一个项目
- Angular js+ng repeat+字母数字索引不起作用
- 如何正确应用Angularjs ng repeat
- AngularJS Navigation (li ng-repeat, create header li), DOM
- 如何使用ng repeat中的选定输入更新我的对象
- 无法使用ng repeat检索动态创建的JSON对象的属性
- 使用 ng-repeat访问 ng 表单元素/值
- Toggle Switch在包含ng model和ng repeat之后不进行切换
- 如何在ng repeat angular js中使用$index
- 在Angularjs中,我如何使用ng repeat、ng model和ng click来动态更改内容
- ng repeat在ng repeat-过滤器不工作
- 在ng repeat中使用带有orderBy的方法
- Angular JS ng-repeat
- 在ng repeat中使ng disabled为true
- AngularJS:如何在ng repeat中使用$index
- 复选框无法正常使用ng repeat,AngularJs
- 如何避免在HTML中使用ng repeat对url名称进行硬编码
- 替换ng repeat中的一些符号