如何在角度过滤器中添加regEx [英] How to add regEx in angular filter
问题描述
示例:朋克车
在上面的示例中，我使用angular创建了一个带有过滤器选项的简单表单.
From the above example, I have created a simple form with filter option using angular.
就过滤器而言，它是由angular提供的默认过滤器.目前，当我搜索文本"br"时，它会显示ID 1和10.
As far as the filter concern, it's a default filter which is provided by angular. Currently, when I search the text "br", it shows the id 1 and 10.
我想在搜索输入中添加regEx.可以使用 regEx 完成搜索.
I would like to add the regEx in the search input.The search can be done using regEx.
我需要的是，搜索项可以是
what I need is, The search item can be
- "br" =>它显示两个数据，
- "b *" =>显示所有以b开头的数据.
- "*" =>所有数据
- "* br" =>所有数据均以br结尾.
以上搜索应根据搜索输入显示相关数据.
The above search should show the relevant data as per the search input.
scripts.js
var app = angular.module('app',[]);
app.controller('regEx', function($scope, $http) {
$scope.init = function() {
$http.get('https://jsonplaceholder.typicode.com/users/').success(function(data) {
$scope.data = data;
console.log(data);
}).error(function(e) {
console.log(e);
});
}
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="regEx" class="container">
<h1>RegEx in Angular search</h1>
<input type="text" class="form-control" ng-model="search" autofocus>
<br />
<table ng-init="init()" class="table table-bordered animated fadeIn">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Phone Number</th>
<th>username</th>
<th>website</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="d in data | filter:search">
<td>{{d.id}}</td>
<td>{{d.name}}</td>
<td>{{d.phone}}</td>
<td>{{d.username}}</td>
<td>{{d.website}}</td>
</tr>
<tr ng-if="d.length < 1">
<td colspan="5" class="text-center">No Router Found</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
推荐答案
在这种情况下，我可能会创建一个自定义过滤器.
In this case I would probably create a custom filter.
这里最棘手的部分是您的对象模型不是平坦的，因此我们必须进行深入遍历以检查字段.这种方法的警告是，您可能会检查不可见的字段(尽管我相信这是默认角度滤镜的行为).
The tricky part here is that your object model is not flat, so we have to do a deep traversal to check the fields. The caveat to this approach is that you could potentially be checking against fields that are not visible (although i believe this is how the default angular filter behaves).
如果这是一个问题，则可以调整过滤器以传递要检查的字段列表，并使用这些过滤器过滤掉不需要的字段.
If that is an issue, you could adjust the filter to pass in a list of fields to check against and use those to filter out unwanted fields.
以下是过滤器:
app.filter('wildcard', function() {
return function(list, value) {
if (!value) {
return list;
}
var escaped = value.replace(/([.+?^=!:${}()|\[\]\/\\])/g, "\\$1");
var formatted = escaped.replace('*', '.*')
if (formatted.indexOf('*') === -1) {
formatted = '.*' + formatted + '.*'
}
var output = []
angular.forEach(list, function(item) {
var regex = new RegExp('^' + formatted + '$', 'im');
if (traverse(item, regex)) {
output.push(item);
}
});
return output
}
function traverse(item, regex) {
for (var prop in item) {
//angular property like hash
if(prop[0] === '$$'){
return;
}
var value = item[prop];
if (typeof value === 'object') {
traverse(value, regex);
}
if(regex.test(value)){
return true;
}
}
}
})
然后在您的HTML中:
And then in you html :
<tr ng-repeat="d in data | wildcard:search">
这篇关于如何在角度过滤器中添加regEx的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
