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

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

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

和搜索输入

 ng-model="search.name" 

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

例:

 query = zza 

结果:

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

您可以创建自己的自定义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/ 。

来自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');