如何在angular js中搜索和突出显示? [英] how to search and highlight in angular js?

查看：28 发布时间：2021/11/9 23:20:01 javascript jquery angularjs angularjs-directive angularjs-scope

本文介绍了如何在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 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 ?

解决方案

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中搜索和突出显示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何在angular js中搜索和突出显示? [英] how to search and highlight in angular js?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何在angular js中搜索和突出显示? [英] how to search and highlight in angular js?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭