如何在 Angular js 中搜索和突出显示？答案

【问题标题】：how to search and highlight in angular js?如何在 Angular js 中搜索和突出显示？
【发布时间】：2014-09-08 10:41:28
【问题描述】：

我有一个 div，我在其中有一些争论。我需要从该 div 中搜索文本并突出显示该单词（使用 css 类）。使用 next 它搜索下一个单词出现和上一个出现。我可以在 jquery 中以小提琴为例 http://jsfiddle.net/3MVNj/5/ 你能建议我如何在 angular js 中实现这一点吗？笨蛋 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>

有没有办法搜索过滤器？

【问题讨论】：

你可以使用 angular-ui angular-ui.github.io/ui-utils 看高亮部分
你能不能做plunker..？这样我就明白了..
包含指令和使用如图，哪部分不明白？
@charlietfl 我检查它在用户键入时突出显示的链接。但是当用户单击搜索按钮时我需要突出显示文本。我知道 angular ，但是 Jquery 和 javascript 的知识请检查我的小提琴所以您了解要求是什么。在 inputfiled 上输入任何内容并按搜索突出显示该单词
所以在按钮事件中设置过滤谓词而不是绑定到输入

标签： javascript jquery angularjs angularjs-directive angularjs-scope

【解决方案1】：

您可以使用旧的搜索算法，例如：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(){
     // you implement
  }
});

【讨论】：