突出显示AngularJS中的筛选结果
Luk*_*kmo 55 angularjs angularjs-ng-repeat
我正在使用ng-repeat并在angularJS中过滤,就像手机教程一样,但我想在页面中突出显示搜索结果.使用基本的jQuery,我只需要在输入上的键上解析页面,但我正在尝试以角度方式进行.有任何想法吗 ？
我的代码:
<input id="search" type="text" placeholder="Recherche DCI" ng-model="search_query" autofocus>
<tr ng-repeat="dci in dcis | filter:search_query">
<td class='marque'>{{dci.marque}} ®</td>
<td class="dci">{{dci.dci}}</td>
</tr>
Dmi*_*zin 90
为AngularJS v1.2 +做了那个
HTML:
<span ng-bind-html="highlight(textToSearchThrough, searchText)"></span>
JS:
$scope.highlight = function(text, search) {
if (!search) {
return $sce.trustAsHtml(text);
}
return $sce.trustAsHtml(text.replace(new RegExp(search, 'gi'), '<span class="highlightedText">$&</span>'));
};
CSS:
.highlightedText {
background: yellow;
}
- 应该注意的是,上面有特殊字符的问题,比如匹配(或&等等我通过escape()解决了这个问题 - 搜索和文本字符串,然后返回unescape()版本的$ sce.trustAsHtml,它似乎正确处理特殊字符:`return $ sce.trustAsHtml(unescape(escape(text).replace(new RegExp(escape(search),'gi'),'<span class ="highlightedText" > $&</跨度>')));` (10认同)
- 如果搜索文本出现在某个链接中会怎样？比如搜索`apple`和返回的html包含`http:// www.apple.com`.它不会破坏链接吗？ (2认同)
- 你应该使用这个函数来转义特殊字符`RegExp.quote = function(str){return(str +'').replace(/ [.？*+ ^ $ [\] \\(){} | - ]/g, "\\ $&"); 像这样:`新的RegExp(RegExp.quote(搜索),'gi')` (2认同)
Uri*_*Uri 22
angular ui-utils只支持一个术语.我使用以下过滤器而不是范围函数:
app.filter('highlight', function($sce) {
return function(str, termsToHighlight) {
// Sort terms by length
termsToHighlight.sort(function(a, b) {
return b.length - a.length;
});
// Regex to simultaneously replace terms
var regex = new RegExp('(' + termsToHighlight.join('|') + ')', 'g');
return $sce.trustAsHtml(str.replace(regex, '<span class="match">$&</span>'));
};
});
和HTML:
<span ng-bind-html="theText | highlight:theTerms"></span>
- 所以我做了`var regex = new RegExp('('+ termsToHighlight.join('|')+')','ig');` (3认同)
- 我不得不首先这样做:`termsToHighlight = termsToHighlight.split("");`排序之前. (2认同)
Dmi*_*try 13
过滤器 - > Highlite(过滤器).还有Keypress指令.
- 突出显示过滤器不再可用,已弃用.请访问https://github.com/angular-ui/ui-utils以使用已弃用的代码. (5认同)
的index.html
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="app.js"></script>
<style>
.highlighted { background: yellow }
</style>
</head>
<body ng-app="Demo">
<h1>Highlight text using AngularJS.</h1>
<div class="container" ng-controller="Demo">
<input type="text" placeholder="Search" ng-model="search.text">
<ul>
<!-- filter code -->
<div ng-repeat="item in data | filter:search.text"
ng-bind-html="item.text | highlight:search.text">
</div>
</ul>
</div>
</body>
</html>
app.js
angular.module('Demo', [])
.controller('Demo', function($scope) {
$scope.data = [
{ text: "<< ==== Put text to Search ===== >>" }
]
})
.filter('highlight', function($sce) {
return function(text, phrase) {
if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
'<span class="highlighted">$1</span>')
return $sce.trustAsHtml(text)
}
})
参考:http://codeforgeek.com/2014/12/highlight-search-result-angular-filter/ 演示:http://demo.codeforgeek.com/highlight-angular/
angular-bootstrap中有标准的高光滤镜:typeaheadHighlight
用法
<span ng-bind-html="text | typeaheadHighlight:query"></span>
使用范围{text:"Hello world", query:"world"}渲染
<span...>Hello <strong>world</strong></span>
我希望我的光榜能让人们易于理解:
app.filter('highlight', function() {
return function(text, phrase) {
return phrase
? text.replace(new RegExp('('+phrase+')', 'gi'), '<kbd>$1</kbd>')
: text;
};
});
<input type="text" ng-model="search.$">
<ul>
<li ng-repeat="item in items | filter:search">
<div ng-bind-html="item | highlight:search.$"></div>
</li>
</ul>
