本文介绍了如何在angular js中搜索和突出显示?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个 div,其中我有一些争论.我需要从该 div 中搜索文本并突出显示该单词(使用 css 类).使用 next 搜索下一个单词出现和上一个出现.我可以在 jquery 中以小提琴为例http://jsfiddle.net/3MVNj/5/你能建议我如何在 angular js 中实现这一点吗?笨蛋http://plnkr.co/edit/V805fEjJAUbAZIuafJcW?p=preview

<html ng-app="app"><头><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><风格>.highlightedText {背景:黄色;}</风格><身体><div ng-controller="控制"><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">你好,我需要从竞争中搜索文本.点击搜索它搜索第一个词.

<脚本>var app=angular.module('app',[]);app.controller("contr",function($scope){$scope.searchFirst=function(){alert('搜索第一个文本')}$scope.nextSearch=function(){警报('下一个搜索')}$scope.preSearch=function(){警报('预搜索')}});</html>

有没有办法搜索过滤器?

解决方案

您可以使用旧的搜索算法,例如:http://plnkr.co/edit/As9iyCVtMMNH7lyprJA9?p=preview

添加的是

<button ng-click="searchFirst(searchtext)">FirstText</button>

示例搜索,仅转发(上一个实现与 AngularJS 无关)(运行示例见链接):

尝试搜索sear"...只对那个词进行过测试...=)

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(){//你实现}});

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 fiddlehttp://jsfiddle.net/3MVNj/5/can you please suggest how I will achieve this in angular js ?plunkerhttp://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 ?

解决方案

you can use your old search algorithm, as an example: http://plnkr.co/edit/As9iyCVtMMNH7lyprJA9?p=preview

what is added is

<button ng-click="searchFirst(searchtext)">FirstText</button>

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
  }
});

这篇关于如何在angular js中搜索和突出显示?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-05 14:26
查看更多