如何搜索和角度JS亮点？ [英] how to search and highlight in angular js?
问题描述
我有一个div中，我在这。我的一些主张需要从该div搜索文本，并强调这个词（使用CSS类）。采用它旁边搜索下一个字的发生和previous发生。
我能够在jQuery来作出例子小提琴
http://jsfiddle.net/3MVNj/5/
可以请你建议我怎么会在角JS实现这一目标？
plunker
http://plnkr.co/edit/V805fEjJAUbAZIuafJcW?p=$p$pview
I have a div in which I have some contend in that .I need to search text from that div and highlight the word (using css class).using next it search next word occurrence and previous occurrence. I am able to make in jquery as example in fiddle http://jsfiddle.net/3MVNj/5/ can you please suggest how I will achieve this in angular js ? plunker http://plnkr.co/edit/V805fEjJAUbAZIuafJcW?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<style>
.highlightedText {
background: yellow;
}
</style>
<body>
<div ng-controller="contr">
<input type="text" ng-model="searchtext" />
<button ng-click="searchFirst()">FirstText</button>
<button ng-click="nextSearch()">NextSearch</button>
<button ng-click="preSearch()">PreviousSearch</button>
<div id="contend">hello I need to search text from the contend
.On click of search it search the first word.
</div>
</div>
<script>
var app=angular.module('app',[]);
app.controller("contr",function($scope){
$scope.searchFirst=function(){
alert('search First text')
}
$scope.nextSearch=function(){
alert('nextSearch')
}
$scope.preSearch=function(){
alert('preSearch')
}
});
</script>
</body>
</html>
有没有什么办法来搜索过滤器？
is there any way to search filter ?
推荐答案
您可以使用旧的搜索算法，作为一个例子：的 http://plnkr.co/edit/As9iyCVtMMNH7lyprJA9?p=$p$pview
you can use your old search algorithm, as an example: http://plnkr.co/edit/As9iyCVtMMNH7lyprJA9?p=preview
什么是添加
<button ng-click="searchFirst(searchtext)">FirstText</button>
例如搜索，只向前（$ P $光伏相关执行不AngularJS）（见链接运行为例）：
example search, forward only (prev implementation not AngularJS related)(see link for running example):
尝试搜索烧焦......对这个词只测试... =）
Try searching "sear"... have tested on that word only... =)
app.controller("contr",function($scope){
var searcher = new Searcher();
var div = angular.element(document.getElementById('content'));
$scope.searchFirst=function(str){
searcher.setOffset(0);
searcher.setContent(div.text());
div.html(searcher.search(str));
}
$scope.nextSearch=function(){
div.html(searcher.search());
}
$scope.preSearch=function(){
// you implement
}
});
这篇关于如何搜索和角度JS亮点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
