AngularJS:Bootstrap提前自定义突出显示 [英] Angularjs : Bootstrap typeahead customize highlight

问题描述

我正在提前使用UI引导程序，并且根据前导字符进行匹配.例如，如果我在输入框中键入"A"，我希望看到以"A"开头的所有状态，如阿拉巴马州"，而不是名称中包含"A"的所有状态.

I am using UI bootstrap type-ahead and I am matching based on the leading characters. For example if I type 'A' in the input box I would like to see all the states that start with 'A' as in "Alabama" and not all the states that contain an 'A' in the name.

现在，我要实现的目标是，除了在输入框中键入"A"之外，还要过滤掉所有以"A"开头的状态，我只希望突出显示第一个A.如果单词是阿拉巴马州"，则应仅突出显示阿拉巴马州"的第一个"A"，而不突出显示"A"的其他出现.如果我的列表中有单词爸爸"，并且在输入框中键入"Pa"，则应突出显示爸爸"中单词"Pa"的首次出现.

Now what I want to achieve is if I type 'A' in the input box in addition to filtering out all states that start with 'A', I want only the first A to be highlighted. If the word is "Alabama" it should highlight only the first "A" of "Alabama" and not other occurences of "A". If I have the word 'Papa' in my list and I type 'Pa' in the input box it should highlight the first occurrence of the word 'Pa'in 'Papa'.

这是我的示例代码

myHtml.html

myHtml.html

<div class='container-fluid' ng-controller="TypeaheadCtrl">
   <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue:startsWith">
</div>

myJs.js

angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl',   function($scope) {

  $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas'];

 $scope.startsWith = function(state, viewValue) {
        return state.substr(0, viewValue.length).toLowerCase() ==  viewValue.toLowerCase();
      } 
 });

推荐答案

有两个(或三个)选项，具体取决于您是否使用自定义结果模板.

There are two (or three maybe) options, depending on whether or not you're using a custom results template.

如果使用内置结果模板，则可以覆盖或装饰使用的现有过滤器.像这样:

If using the built-in results template, you can override or decorate the existing filter used. Like so:

(function () {
    'use strict';

    angular.module('yourModuleName')
        .config(['$provide', '$injector', function($provide, $injector) {

            $provide.decorator('uibTypeaheadHighlightFilter', ['$delegate', function($delegate) {

                var extendsFilter = function() {
                    var isSanitizePresent = $injector.has('$sanitize');

                    function escapeRegexp(queryToEscape) {
                        // Regex: capture the whole query string and replace it with the string that will be used to match
                        // the results, for example if the capture is "a" the result will be \a
                        return queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/, '\\$1');
                    }

                    function containsHtml(matchItem) {
                        return /<.*>/g.test(matchItem);
                    }

                    function matchFunction (matchItem, query) {
                        if (!isSanitizePresent && containsHtml(matchItem)) {
                            $log.warn('Unsafe use of typeahead please use ngSanitize'); // Warn the user about the danger
                        }
                        
/* THIS LINE HERE IS THE ONLY LINE I CHANGED */                        
                        matchItem = query ? ('' + matchItem).replace(new RegExp(escapeRegexp(query), 'i'), '<strong>$&</strong>') : matchItem; // Replaces the capture string with a the same string inside of a "strong" tag
                        if (!isSanitizePresent) {
                            matchItem = $sce.trustAsHtml(matchItem); // If $sanitize is not present we pack the string in a $sce object for the ng-bind-html directive
                        }

                        return matchItem;
                    }

                    return matchFunction.apply(null, arguments);
                };

                return extendsFilter;
            }]);
        }]);
})();

请注意，我对原始过滤器源代码所做的唯一更改是在正则表达式替换中，就在我标记的位置正下方/*这行是我更改的唯一行*/

Notice that the only change i made to the original filter source code was in the regex replace, right under where i marked /* THIS LINE HERE IS THE ONLY LINE I CHANGED */

原始资料在最底部: https://github.com/angular-ui/bootstrap/blob/master/src/typeahead/typeahead.js

旧代码:

matchItem = query ? ('' + matchItem).replace(new RegExp(escapeRegexp(query), 'gi'), '<strong>$&</strong>') : matchItem; // Replaces the capture string with a the same string inside of a "strong" tag

新代码(已删除正则表达式全局标志'g'):

New Code (removed the regex global flag 'g'):

matchItem = query ? ('' + matchItem).replace(new RegExp(escapeRegexp(query), 'i'), '<strong>$&</strong>') : matchItem; // Replaces the capture string with a the same string inside of a "strong" tag

如果您使用的是自定义结果模板(请参见示例的源代码 http://angular-ui.github.io/bootstrap/versioned-docs/2.4.0/#/typeahead )，您只需在自定义结果模板中指定自己的突出显示过滤器，像这样:

If you are using a custom results template ( see examples' source code http://angular-ui.github.io/bootstrap/versioned-docs/2.4.0/#/typeahead ), you can just specify your own highlight filter in the custom results template, like so:

<script type="text/ng-template" id="yourCustomResultsTemplate.html">
  <a>
      <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
      <span ng-bind-html="match.label | uibTypeaheadHighlightCustomizedByYou: query"></span>
  </a>
</script>

然后，您只需复制/粘贴原始过滤器源代码，然后以与上述相同的方式对其进行修改即可.

Then you would just copy/paste the original filter source code, and modify it in the same way as we did above.

这篇关于AngularJS:Bootstrap提前自定义突出显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！