Question

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

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

和搜索输入

ng-model="search.name"

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

示例：

query = zza

结果：

栗* ZZA *
PI * ZZA *
ABC * ZZA * DEF

Answer 1

您可以创建自己的自定义过滤器，根据搜索字符串改变输入：

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
    .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/。

Answer 2

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

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

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

.filter('searchfilter', function() {
    return function (input, query) {
        if (query === '') {
            return input;
        }
        return input.replace(RegExp('('+ query + ')', 'g'), '<span class="super-    class">$1</span>');           
    }    
});

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

RegExp('('+ query + ')', 'gi'), '<span class="super-    class">$1</span>');

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

2 个答案: