Question

当我在我的应用程序中进行搜索时，我想用粗体标签包装结果中的匹配字符，以便您可以看到匹配。

结果视图如下所示：

<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和var keys = $scope.filterQuery.split(" "); result.snippet.replace('/('.implode('|', keys) .')/iu', '<b>\0</b>');周围换标记。

类似的东西（这些内容是从我以前完成的PHP版本中复制的，因此语法不匹配）：

{{1}}

但这会在哪里？

Answer 1

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

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

使用以下模板：

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

Answer 2

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

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

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

Heres a question that talks about it

Angular UI Highlight

AngularJS View中的粗体匹配字符

2 个答案: