在表格數據中使用AngularJS過濾器+ ng-repeat突出顯示網格中的文本

我想突出顯示正在創建表格的ng-repeat下的搜索文本。我找到了一個過濾器作爲我的解決方案，但它不適用於表格。在表格數據中使用AngularJS過濾器+ ng-repeat突出顯示網格中的文本

任何人都可以指出我錯在哪裏使其工作。

<body ng-app="Demo"> 
    <h1>Hello Plunker!</h1> 

    <div class="container" ng-controller="Demo"> 
     <input type="text" placeholder="Search" ng-model="search"> 

     <table> 
     <thead> 
      <th>Some</th> 
      <th>MyName</th> 
     </thead> 
     <tbody> 
     <tr ng-repeat="item in data | filter:search" 
      > 
      <td> 
       <td>{{item.title}}</td> 
       <td>{{item.name}}</td> 
      </td> 
     </tr> 
     </tbody> 
     <!-- with filter --> 

     </table> 
    </div> 

    <script> 
     angular.module('Demo', []) 
     .controller('Demo', function($scope) { 
      $scope.data = [ 
      { title: "Bad",name:'kaushik' }, 
      { title: "Good",name:'1kaushik' }, 
      { title: "Great",name:'2kaushik' }, 
      { title: "Cool" ,name:'3kaushik'}, 
      { title: "Excellent",name:'4kaushik' }, 
      { title: "Awesome",name:'5kaushik' }, 
      { title: "Horrible",name:'6kaushik' }, 
      ] 
     }) 
     .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) 
      } 
     }) 
    </script> 
    </body>

This is working copy of the & demo the same thing I wants is with table.

來源

2017-04-03 Kaushik Thanki

你不是應用highlight過濾器，你也有嵌套<td>元素。試試這個：

<tr ng-repeat="item in data | filter:search"> 
    <td ng-bind-html="item.title | highlight:search></td> 
    <td ng-bind-html="item.name | highlight:search"></td> 
</tr>

angular.module('Demo', []) 
 
    .controller('Demo', function($scope) { 
 
    $scope.data = [{ 
 
     title: "Bad", 
 
     name: 'kaushik' 
 
     }, 
 
     { 
 
     title: "Good", 
 
     name: '1kaushik' 
 
     }, 
 
     { 
 
     title: "Great", 
 
     name: '2kaushik' 
 
     }, 
 
     { 
 
     title: "Cool", 
 
     name: '3kaushik' 
 
     }, 
 
     { 
 
     title: "Excellent", 
 
     name: '4kaushik' 
 
     }, 
 
     { 
 
     title: "Awesome", 
 
     name: '5kaushik' 
 
     }, 
 
     { 
 
     title: "Horrible", 
 
     name: '6kaushik' 
 
     }, 
 
    ] 
 
    }) 
 
    .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) 
 
    } 
 
    });

.highlighted { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> 
 

 
<body ng-app="Demo"> 
 
    <h1>Hello Plunker!</h1> 
 

 
    <div class="container" ng-controller="Demo"> 
 
    <input type="text" placeholder="Search" ng-model="search"> 
 

 
    <table> 
 
     <thead> 
 
     <th>Some</th> 
 
     <th>MyName</th> 
 
     </thead> 
 
     <tbody> 
 
     <tr ng-repeat="item in data | filter:search"> 
 
      <td> 
 
      <td ng-bind-html="item.title | highlight:search"></td> 
 
      <td ng-bind-html="item.name | highlight:search"></td> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
     <!-- with filter --> 
 

 
    </table> 
 
    </div> 
 

 
    <script> 
 
    </script> 
 
</body>

來源

2017-04-03 15:49:47 Lex

沒有運氣與此 –

我只是增加了一個工作片段。具體來說，你是不是可以在你的代碼中工作？ – Lex

thx mate，相同的代碼不適用於闖入者 –

在表格數據中使用AngularJS過濾器+ ng-repeat突出顯示網格中的文本

回答

相關問題