AngularJS突出显示ng-repeat中的过滤文本

时间:2016-02-15 22:36:46

标签: angularjs filter angularjs-ng-repeat

我有一个显示JSON对象属性的列表。我正在显示字符串和数字。我试图在用户输入时突出显示搜索到的输入。我在网上看过很多例子,但是如果从JSON对象传递一个属性而不是多个属性,则大多数都可以工作。

<ul class="item-list" ng-class="{'scroll-list': overIndex.data.length > 5}">
                    <li ng-repeat="data in overIndex.data | filter:oiSearch ">

                        <span ng-bind-html="highlight(data, oiSearch)"></span>

                        <h4>{{data.marketing_name}}</h4>

                        <div class="item-container">
                            <div class="bar-container">
                                <div class="bar" style="width: 48%;"></div>
                                <span class="label">Enthusiasts</span>
                                <span class="value">{{data.enthu}}</span>
                            </div>



                        </div>

                    </li>
                </ul>

HTML:

$scope.highlight = function(text, search) {
                if (!search) {
                    return $sce.trustAsHtml(text);
                }
                return $sce.trustAsHtml(text.replace(new RegExp(search, 'gi'), '<span class="highlightedText">$&</span>'));
            };

JS:

.highlightedText {
background-color: yellow;
}

CSS:

0 个答案:

没有答案