Wie markieren Sie Daten, wenn der Suchtext mit dem verfügbaren Text im Array übereinstimmt?

Question

Ich habe $scope.data, die bereits auf dem Bildschirm mit ng-repeat angezeigt wird, habe ich einen Eingang, wo Benutzer von $scope.data suchen kann, So habe ich Filter erstellt, wenn der User-Suchtext mit $scope.data markieren diesen Text, es wirft keine Ausnahme aber auch nicht Hervorhebung Der Text, ich bin relativ neu zu angularjs Filter Hilfe wird sehr geschätzt werden. Danke im Voraus.

ctrl.js

$scope.data = ["Lorem Ipsum is simply dummy text", "Lorem Ipsum is simply dummy text"]; 

main.html

<div class="row search-input-margin"> 
    <div class="col-md-12 form-group"> 
     <div class="col-md-3"> 
      <label for="search">Search Logs:</label> 
     </div> 
     <div class="col-md-9"> 
      <input type="text" class="form-control" id="search" ng-model="vm.searchLog"> 
     </div> 
    </div> 
</div> 

    <div class="row"> 
      <div class="col-md-12"> 
       <ul style="list-style: none;"> 
        <li ng-repeat="message in data track by $index"><span><strong>Log:</strong></span><span>{{message}}</span></li> 
       </ul> 
      </div> 
      <div> 
       <ul> 
        <!-- filter code --> 
        <div ng-repeat="item in data | filter:vm.searchLog" 
         ng-bind-html="item | highlight:vm.searchLog"> 
        </div> 
       </ul> 
      </div> 
     </div> 

filter.js

angular.module('App').filter('highlight', function($sce) { 
     return function(text, phrase) { 
      if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'), 
       '<span class="highlighted">$1</span>') 

      return $sce.trustAsHtml(text) 
     } 

    }); 

Answer 1

Sie fehlen Stil für die .highlighted Klasse

var app = angular.module("sa", []); 
 

 
app.controller("FooController", function($scope) { 
 
    $scope.data = ["Lorem Ipsum is simply dummy text", "Lorem Ipsum is simply dummy"]; 
 
}); 
 

 
app.filter('highlight', function($sce) { 
 
    return function(text, phrase) { 
 
    if (phrase) text = text.replace(new RegExp('(' + phrase + ')', 'gi'), 
 
     '<span class="highlighted">$1</span>') 
 

 
    return $sce.trustAsHtml(text) 
 
    } 
 

 
});

.highlighted { 
 
    font-weight: bold 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 

 
<div ng-app="sa" ng-controller="FooController as vm"> 
 

 
    <div class="row search-input-margin"> 
 
    <div class="col-md-12 form-group"> 
 
     <div class="col-md-3"> 
 
     <label for="search">Search Logs:</label> 
 
     </div> 
 
     <div class="col-md-9"> 
 
     <input type="text" class="form-control" id="search" ng-model="vm.searchLog"> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <ul> 
 
    <!-- filter code --> 
 
    <li ng-repeat="item in data | filter: vm.searchLog" ng-bind-html="item | highlight:vm.searchLog"> 
 
    </li> 
 
    </ul> 
 

 

 
</div>

Answer 2

<div ng-repeat="item in data | filter:vm.searchLog" 
     ng-bind-html-unsafe="item | highlight:vm.searchLog"> 
</div> 

Warum Sie ng-bind-html-unsafe hier nicht benutzen? und wenn Sie mit ng-bind-html sind Sie Laden angular-sanitize.min.js

Eine ausführlichere Link hier: AngularJS : Insert HTML into view