anglejsフィルタを使用して検索結果を強調表示

私は単純なテーブルを持っており、 "追加"ボタンをクリックすると次の行が追加されます。anglejsフィルタを使用して検索結果を強調表示

検索入力フィールドとテーブル入力フィールドの一致を強調表示する必要があります。これを達成するために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 –

anglejsフィルタを使用して検索結果を強調表示

答えて

関連する問題