我有一个像这样过滤的列表:
ng-repeat="item in items | filter:query | limitTo:10"
和一个搜索输入
ng-model="search.name"
它有效,但我想将结果中的查询部分设为粗体。
例子:
query = zza
结果:
- 李*zza*
- Pi*zza*
- Abc*zza*def
最佳答案
您可以制作自己的自定义过滤器,根据搜索字符串更改输入:
angular.module('app').filter('searchfilter', function() {
return function (input, query) {
var r = RegExp('('+ query + ')', 'g');
return input.replace(r, '<span class="super-class">$1</span>');
}
});
这有效,但过滤器返回 html,因此您需要告诉 angular 将结果视为 html。为此,您需要包含 ngSanitize作为模块依赖项并使用 ng-bind-html
插入结果。
这是一个完整的演示:
<div ng-app="app">
<div ng-controller="Ctrl">
<input ng-model="search" placeholder="search a fruit" />
<ul>
<li ng-repeat="fruit in fruits| filter:search | limitTo:10" ng-bind-html="fruit | searchfilter:search" ></li>
</ul>
</div>
</div>
还有 Angular 部分:
angular
.module('app', ['ngSanitize'])
.controller('Ctrl', function($scope){
$scope.fruits = 'apple orange banana pineaple grape plumb strawberry lemon lime'.split(' ');
})
.filter('searchfilter', function() {
return function (input, query) {
return input.replace(RegExp('('+ query + ')', 'g'), '<span class="super-class">$1</span>');
}
});
这是在线演示:http://jsfiddle.net/gion_13/ZDWdH/2/ .
关于javascript - Angular : filter and bold part of the result,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17430172/