AngularJS：结果的过滤和粗体部分

我有一个像这样过滤的列表：

ng-repeat="item in items | filter:query | limitTo:10" 

和搜索输入

 ng-model="search.name" 

它有效，但我想使结果中的查询部分变为粗体。

例：

 query = zza 

结果：

• 李* 扎 *
• Pi * zza *
• Abc * zza * def

Answer 1

您可以创建自己的自定义filter，根据搜索字符串更改输入：

 angular.module('app').filter('searchfilter', function() { return function (input, query) { var r = RegExp('('+ query + ')', 'g'); return input.replace(r, '$1'); } }); 

这有效，但filter返回html，因此您需要告诉angular将结果视为html。 为此，您需要将ngSanitize作为模块依赖项包含在内 ，并使用ng-bind-html插入结果。
这是一个完整的演示：

角部分：

 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'), '$1'); } }); 

这是在线演示： http ： //jsfiddle.net/gion_13/ZDWdH/2/ 。

Answer 2

来自gion_13的答案的两个提示。

如果查询是空字符串（在过滤然后删除搜索项之后），则输入“apple”将被修改为：apple

解决方案是更改正则表达式或提前返回：

 .filter('searchfilter', function() { return function (input, query) { if (query === '') { return input; } return input.replace(RegExp('('+ query + ')', 'g'), '$1'); } }); 

如果您不想要区分大小写的filter而不是更改RegExp：

 RegExp('('+ query + ')', 'gi'), '$1');