AngularJS视图中的粗体匹配字符答案

【问题标题】：Bold matching characters in AngularJS ViewAngularJS视图中的粗体匹配字符
【发布时间】：2015-02-03 03:12:37
【问题描述】：

当我在我的应用程序中进行搜索时，我想用粗体标记将结果中的匹配字符包装起来，以便您查看匹配项。

所以结果视图看起来像：

<ul class="search-results ng-hide" ng-show="(results | filter: filterQuery).length > 0">
    <li ng-repeat="result in results | filter:filterQuery">
        <h3><a ui-sref="{{result.state}}">{{result.name}}</a></h3>
        <p>{{result.snippet}}</p>
    </li>
</ul>

还有控制器：

myApp.controller('SearchCtrl', function($rootScope, $scope, $state, Result, $location, $filter) {

    $scope.query = ($state.includes('search') ? $location.search()['q'] : '');
    $scope.filterQuery = ($state.includes('search') ? $location.search()['q'] : '');

    $scope.results = [];

    $scope.queryChanged = function () {
        $scope.filterQuery = $scope.query;
        if($scope.query){
            $state.go('search', {'q': $scope.query} );
        } else {
            $location.search('q', null);
        }
    }

    if($scope.query){
        $scope.results = Result.query();
    } else {
        $location.search('q', null);
    }

});

所以我需要在result.name 和result.snippet 与filterQuery 匹配时将标签包裹起来。

类似的东西（这部分是从我过去完成的 PHP 版本中复制的，因此语法不匹配）：

var keys = $scope.filterQuery.split(" ");
result.snippet.replace('/('.implode('|', keys) .')/iu', '<b>\0</b>');

但是这会去哪里呢？

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

创建一个search-result 指令来包装每个搜索结果，其中name 需要设置为粗体：

<search-result result="result" name="name" ></search-result>

使用以下模板：

directive.template: 'prefix text' + '<B>' + attrs.name + </B> + ' suffix text';

【讨论】：

【解决方案2】：

有几种方法可以做到这一点，主要是使用过滤器。

您可以编写自己的过滤器，在搜索中获取字符串，在您正在搜索的内容中找到它，然后在其周围添加标签并将其发回。

或者，您可以使用执行此操作的众多插件之一。

Heres a question that talks about it

Angular UI Highlight

【讨论】：