我有一个显示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: