javascript AngularJS：过滤和加粗结果部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17430172/
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
AngularJS : filter and bold part of the result
提问by Alex
I have a list filtered like this:
我有一个这样过滤的列表：
ng-repeat="item in items | filter:query | limitTo:10"
and a search input
和一个搜索输入
ng-model="search.name"
It works but I would like to make the query part in the results bold.
它有效，但我想让结果中的查询部分加粗。
Example:
例子：
query = zza
results:
结果：
- Li*zza*
- Pi*zza*
- Abc*zza*def
- 丽* zza*
- PI * ZZA*
- ABC * ZZA* DEF
回答by gion_13
You can make your own custom filter that alters the input based on the search string :
您可以制作自己的自定义过滤器，根据搜索字符串更改输入：
angular.module('app').filter('searchfilter', function() {
return function (input, query) {
var r = RegExp('('+ query + ')', 'g');
return input.replace(r, '<span class="super-class"></span>');
}
});
This works, but the filter returns html, so you will need to tell angular to treat the result as html. In order to do this, you need to include ngSanitizeas a module dependency and insert the result with ng-bind-html.
Here's a complete demo :
这有效，但过滤器返回 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>
And the angular part :
和角度部分：
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"></span>');
}
});
Here's the online demo: http://jsfiddle.net/gion_13/ZDWdH/2/.
这是在线演示：http: //jsfiddle.net/gion_13/ZDWdH/2/。
回答by jonas
Two hints for the answer from gion_13.
来自 gion_13 的两个提示。
If the query is a empty string (after filtering and then deleting the search term), then the input "apple" is modified like this: apple
如果查询为空字符串（过滤后删除搜索词），则输入“apple”修改为：apple
The solution for this is to change either the regex or a early return:
解决方案是更改正则表达式或提前返回：
.filter('searchfilter', function() {
return function (input, query) {
if (query === '') {
return input;
}
return input.replace(RegExp('('+ query + ')', 'g'), '<span class="super- class"></span>');
}
});
If you don't want a case sensitive filter than change the RegExp:
如果您不想要区分大小写的过滤器而不是更改 RegExp：
RegExp('('+ query + ')', 'gi'), '<span class="super- class"></span>');
