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