AngularJS：过滤器，结果

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，所以你需要告诉角度看待结果作为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的两个提示。

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

对此的解决方案是改变任何正则表达式或一个早日回归：

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

如果你不想区分大小写的过滤器不是改变正则表达式：

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