filter---用angularjs实现关键字高亮

本文转载自查看原文 2017-01-05 17:03 1378 angularjs

实现关键字的高亮，主要是用到了将关键字动态的用em标签包住，然后对em进行样式操作。然后通过自定义filter，来完成对关键字的筛选。

<html>
    <head>
        <title></title>
         <meta charset='utf-8'/>

         /*js以及css的引用略*/
    </head>
    <body ng-app = "myApp" controller = "myCtrl">
        <ul>
              <li ng-repeat="log in logs">{{log | getKey:log.match}}</li>
        </ul>  
    </body>
</html>

var myApp = angular.module('myApp',[]);

myApp.controller('myCtrl',['$scope',function($scope){
       $scope.logs =[
           {'logName':'logOne','match':'one'},
           {'logName':'logTwo','match':'two'},
           {'logName':'logThree','match':'three'}
        ];
}]);

myApp.filter('getKey',['$sce',function($sce){
     return function(content,match) {
            var reg = new　RegExp(match,'g');
            content.replace(reg,'<em>'+match+'</em>');
            return $sec.trustAsHtml(content);
      }
}])

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 iOS 实现搜索关键字高亮 Js实现页面关键字高亮显示 ionic,angularJs实现搜索框过滤关键字 SecureCRT 关键字高亮显示 qml listview关键字高亮 elasticesearch搜索返回高亮关键字 SpringBoot 整合ElasticSearch，实现站内搜索，高亮关键字 angular2 pipe实现搜索结果中的搜索关键字高亮【小而优】如何实现 tail -f 动态显示日志时高亮显示关键字 vue 搜索关键字列表结果高亮显示