使用单个文本框向多个字段添加严格搜索
Adding strict search to multiple fields with a single textbox
有一个基本的角度应用程序
HTML
<input type="text" ng-model="txt.name" />
<ul>
<li ng-repeat="d in data | filter: txt:strict">
<span>{{d.name}}</span>
<br />
<span>{{d.description}}</span>
<br />
<span>{{d.loremipsum}}</span>
<br />
</li>
</ul>
JS:
var app = angular.module('app', []);
app.controller("mc", function($scope){
$scope.data = [{
'name': 'asd',
'description': 'jiocioasdiasidjpoasdko',
'loremipsum': 'loremipsum'
}, {
'name': 'qwe',
'description': 'poqwpeqwpe',
'loremipsum': 'loremipsum'
}, {
'name': 'czxc',
'description': 'asdasdasd',
'loremipsum': 'loremipsum'
}]
});
我希望能够通过name
和description
进行搜索,但不能通过loremipsum
进行搜索
我该怎么做?
JS BIN 示例
您可以创建自定义过滤器,请参阅下面的演示
var app = angular.module('app', []);
app.controller("mc", function($scope) {
$scope.data = [{
'name': 'asd',
'description': 'jiocioasdiasidjpoasdko',
'loremipsum': 'loremipsum'
}, {
'name': 'qwe',
'description': 'poqwpeqwpe',
'loremipsum': 'loremipsum'
}, {
'name': 'czxc',
'description': 'asdasdasd',
'loremipsum': 'loremipsum'
}];
});
app.filter('customFilter', function() {
return function(items, string) {
var filtered = [];
var stringMatch = new RegExp(string, 'i');
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (stringMatch.test(item.name) || stringMatch.test(item.description)) {
filtered.push(item);
}
}
return filtered;
};
});
<html ng-app="app">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-controller="mc">
<input type="text" ng-model="txt.name" />
<ul>
<li ng-repeat="d in data | customFilter: txt.name">
<span>{{d.name}}</span>
<br />
<span>{{d.description}}</span>
<br />
<span>{{d.loremipsum}}</span>
<br />
</li>
</ul>
</body>
</html>
下面是一个使用自定义函数的示例:自定义功能解决方案
您可能希望在自定义函数中使用match而不是===。
相关文章:
- JS动态添加字段-删除按钮不起作用
- 向laravel表单动态添加字段
- MaskMoney.js无法处理动态添加字段
- 流星:在创建帐户上添加字段
- 使用DB值动态添加字段到Form,php
- 使用object.freeze()扩展函数对象-can't添加字段
- 在ASP.Net web窗体/MVC中动态加载和添加字段
- 如何在使用Knex.JS添加字段时捕捉错误
- KendoUI 网格:动态向数据源添加字段
- Jquery- 动态添加字段 - 防止删除最后一个项目
- JQuery 无法获取动态添加字段的值
- 扩展 Ext.data.Model(动态添加字段)
- 如何使用角度 JS 添加嵌套的添加字段
- 如何在 CKeditor 上传中向 POST 值添加字段
- 在流星中向用户集合添加字段的正确方式
- 按数组分组并在主数组中添加字段和子数组
- 如何在JavaScript中为HTML上的动态添加字段执行乘法
- 如何在javascript中为html上的动态添加字段匹配id
- 在具有嵌套属性的轨道中动态添加字段
- 使用jquery添加字段