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