angularjs 필터를 사용하여 검색 결과 강조 표시

간단한 표가 있으며 "추가"버튼을 클릭하면 다음 행이 추가됩니다.angularjs 필터를 사용하여 검색 결과 강조 표시

검색 입력 필드와 표 입력 필드 간의 일치를 강조 표시해야합니다.

오류와 함께이를 달성하기 위해 highlight 필터를 사용하려고하지만, 그것은 실행 :

"TypeError: Cannot read property 'replace' of undefined"

내가 그것을 어떻게 해결할 수 있을까? 아래 예제 코드 : ng-bind-html="x.text | highlight:search.text" :

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

 
      app.filter('highlight', function($sce) { 
 
       return function(text, phrase) { 
 
       if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'), 
 
       '<span class="highlighted">$1</span>') 
 
       return $sce.trustAsHtml(text) 
 
       } 
 
      }); 
 

 
      app.controller("myCtrl", ['$scope', 'highlightFilter', function($scope, highlightFilter){ 
 
       $scope.arr = []; 
 
       $scope.append = function(){ 
 
        var x = {}; 
 
        x.data1 = ""; 
 
        x.data2 = ""; 
 
        $scope.arr.push(x); 
 
       }; 
 
      }]);

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Author's List</title> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 
     <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
     <style> 
 
      .highlighted { background: yellow } 
 
     </style> 
 
    </head> 
 
    <body ng-controller="myCtrl" ng-app="myApp"> 
 
     <div class="container"> 
 
      <div class="btn-group"> 
 
       <button ng-click ="append()" type="button" class="btn btn-default">Append</button> 
 
       <input type="text" placeholder="Search" ng-model="search.text"> 
 
       <ul> 
 
        <div ng-repeat="x in arr | filter:search.text" ng-bind-html="x.text | highlight:search.text"></div> 
 
       </ul> 
 
      </div> 
 
      <form name ="myForm" novalidate> 
 
       <table class="table table-bordered"> 
 
        <tr> 
 
         <th>data1</th> 
 
         <th>data2</th> 
 
        </tr> 
 
        <tr ng-repeat="x in arr"> 
 
         <td><input ng-model="x.data1" required type="text" class="form-control"></td> 
 
         <td><input ng-model="x.data2" required type="text" class="form-control"></td> 
 
        </tr> 
 
       </table> 
 
      </form> 
 
     </div> 
 
      </body> 
 
</html>

출처

2017-12-21 Vladyslav Plakhuta

여기서 문제는 필터가 첫 번째 매개 변수로 입력 텍스트 필요하지만 당신은 모델에 정의되지 않은 필드를 전달하는 것입니다. 필드가 data1이고 data2인데 text이 아니기 때문에 언급 한 오류가 발생합니다.

귀하의 필터는 실제로 작동,하지만 당신은 그것으로 적절한 입력 매개 변수를 전달해야 :

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

 
      app.filter('highlight', function($sce) { 
 
       return function(text, phrase) { 
 
       if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'), 
 
       '<span class="highlighted">$1</span>') 
 
       return $sce.trustAsHtml(text) 
 
       } 
 
      }); 
 

 
      app.controller("myCtrl", ['$scope', 'highlightFilter', function($scope, highlightFilter){ 
 
       $scope.arr = []; 
 
       $scope.append = function(){ 
 
        var x = {}; 
 
        x.data1 = ""; 
 
        x.data2 = ""; 
 
        $scope.arr.push(x); 
 
       }; 
 
      }]);

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Author's List</title> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 
     <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
     <style> 
 
      .highlighted { background: yellow } 
 
     </style> 
 
    </head> 
 
    <body ng-controller="myCtrl" ng-app="myApp"> 
 
     <div class="container"> 
 
      <div class="btn-group"> 
 
       <button ng-click ="append()" type="button" class="btn btn-default">Append</button> 
 
       <input type="text" placeholder="Search" ng-model="search.text"> 
 
       <br style="clear: both;"/> 
 
       <ul> 
 
        <li ng-repeat="x in arr | filter:search.text"> 
 
         <span ng-bind-html="x.data1 | highlight:search.text"></span> 
 
         <span ng-bind-html="x.data2 | highlight:search.text"></span> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
      <form name ="myForm" novalidate> 
 
       <table class="table table-bordered"> 
 
        <tr> 
 
         <th>data1</th> 
 
         <th>data2</th> 
 
        </tr> 
 
        <tr ng-repeat="x in arr"> 
 
         <td><input ng-model="x.data1" required type="text" class="form-control"></td> 
 
         <td><input ng-model="x.data2" required type="text" class="form-control"></td> 
 
        </tr> 
 
       </table> 
 
      </form> 
 
     </div> 
 
      </body>

출처

2017-12-21 16:41:57

감사합니다! 직접 입력에서 강조 할 수있는 모든 가능성? –

@VladyslavPlakhuta no, 왜냐하면'input'은 평문만을 지원하기 때문입니다. 유일한 것은'input'을'div'와'contenteditable = "true"'로 에뮬레이트하는 것입니다. 여기에서 예제를 볼 수 있습니다. https://stackoverflow.com/a/44675864/4222181 –

angularjs 필터를 사용하여 검색 결과 강조 표시

답변

관련 문제