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 實現搜索關鍵字高亮基於vue實現搜索高亮關鍵字 qt關鍵字高亮 html關鍵字高亮 Js實現頁面關鍵字高亮顯示簡單JavaScript語句實現搜索關鍵字高亮功能 JS 實現關鍵字文本搜索高亮顯示在 Angular 中實現搜索關鍵字高亮 ionic,angularJs實現搜索框過濾關鍵字 SecureCRT 關鍵字高亮顯示