filter---用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);
      }
}])

 

posted @ 2017-01-05 17:03  雨停了  阅读(1594)  评论(0)  编辑  收藏  举报