CODEWITHSUNDEEP
javascriptangularjsfilterangularjs-ng-repeatangular-ngmodel
forgottofly
forgottofly

Reputation: 2719

Highlight filtered element in row angularjs

I have a table that filteres out operator and asset using simple inline ng-repeat angular filter. However in some rows there are more than one operator (ie., second row) which I'm displaying inside scroll.When filtered by operator the rows are getting filtered but not able to display in the row(have to scroll to see the filtered result) the exact operator that is selected .

Example: When selected operator Jill ,I want to see Jill as its inside the row hidden under scroll.

Plunker link

HTML Snippet:

 <tr ng-repeat="item in items | filter:truckName| filter:operatorName">
                  <td>
                    <div ng-class="{'set-height':item.assetOperator.length>'1'}" ng-if="item.assetOperator.length>0">
                     <span ng-repeat="operator in item.assetOperator">
                     {{operator.name}},
                     </span>
                     </div>
                  </td>
                  <td>{{item.assetName}}</td>
               </tr>

Upvotes: 1

Views: 337

Answers (1)

Hadi
Hadi

Reputation: 17299

Try use filter service for this.write filter as following : I doesn't write this filter.

and for hide other elements use filter in second ng-repeat loop.

app.filter('highlight', function() {
return function(text, selectedWord) {
  if(selectedWord) {
    var pattern = new RegExp(selectedWord, "g");
    return text.replace(pattern, '<span class="highlighted">' + selectedWord + '</span>');
  }
  else {
    return text;
   }
 };
});

Demo

Upvotes: 1

Related Questions