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

我有一个像这样筛选的列表：

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

和搜索输入

ng-model="search.name"

它的工作原理,但我想使结果中的查询部分粗体.

例：

query = zza

结果：

>李* zza *
> Pi * zza *
> Abc * zza * def

解决方法

您可以根据搜索字符串制作自己的自定义过滤器来改变输入：

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,所以你需要把角度看作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/.

原文地址：https://www.jb51.cc/js/152697.html