javascript - 如果搜索文本与数组中的可用文本匹配，如何突出显示数据？

Question

我有 $scope.data 已经使用 ng-repeat 显示在屏幕上，我有一个输入，用户可以从 $scope 搜索。 data ，所以我创建了过滤器，如果用户搜索文本与 $scope.data 突出显示该文本，它不会抛出任何异常但也不会突出显示文本，我对 angularjs 过滤器相当陌生帮助将不胜感激。提前致谢。

控制键

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

过滤器.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

您缺少 .highlighted 类的样式

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>