AngularJS: lọc và phần in đậm của kết quả

Question

tôi có một danh sách lọc như thế này:

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

và một đầu vào tìm kiếm

ng-model="search.name" 

Nó hoạt động nhưng tôi muốn thực hiện một phần truy vấn trong kết quả in đậm.

Ví dụ:

query = zza 

kết quả:

• Li * zza *
• Pi * zza *
• Abc * zza * def

Answer 1

Bạn có thể tạo bộ lọc tùy chỉnh của riêng bạn mà làm thay đổi đầu vào dựa trên chuỗi tìm kiếm:

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

này hoạt động, nhưng bộ lọc trả về html, vì vậy bạn sẽ cần phải nói với góc để điều trị kết quả như html . Để thực hiện việc này, bạn cần phải bao gồm ngSanitize làm phụ thuộc của mô-đun và chèn kết quả bằng ng-bind-html.
Dưới đây là một bản demo hoàn chỉnh:

<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> 

Và phần góc:

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

Dưới đây là bản demo trực tuyến: http://jsfiddle.net/gion_13/ZDWdH/2/.

Answer 2

Hai gợi ý cho câu trả lời từ gion_13.

Nếu truy vấn là một chuỗi rỗng (sau khi lọc và sau đó xóa các thuật ngữ tìm kiếm), sau đó các đầu vào "quả táo" được sửa đổi như sau: táo

Giải pháp cho việc này là để thay đổi một trong hai regex hay trở lại sớm:

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

Nếu bạn không muốn có một bộ lọc nhạy cảm hơn trường hợp thay đổi RegExp:

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