Highlight filtered rows in Angular JS

Question

I have a array that needs to highlight duplicate values. This is what I have so far..

HTML

<tr ng-repeat="x in names | unique: 'names'" >
   <td>  {{ x }} </td>
</tr>

<style>
.duplicate{
background: yellow;

}
</style>

Controller:

 angular.module('myApp', []).controller('nameCtrl', function($scope) {
            $scope.names = [
                'Bob',
                'Dan',
                'Philip',
                'Philip',

            ];
        });

EDIT: In the example above "Philip" would be highlighted and would have duplicate class

first of all use that class="" in your tag or use ng-class="" — ojus kulkarni
– ojus kulkarni, Commented Feb 21, 2016 at 13:06

Szabolcs Dézsi · Accepted Answer · 2016-02-21 13:27:26Z

1

You can achieve it like this:

<div ng-app="MyApp">
  <div ng-controller="MyController">
    <table>
      <tr ng-repeat="name in names | unique">
        <td ng-class="{ 'duplicate': names.indexOf(name) !== names.lastIndexOf(name) }">{{name}}</td>
      </tr>
    </table>
  </div>
</div>

This applies the duplicate class for elements where the indexOf returns a different value than the lastIndexOf. This can only happen for items that are in the array more than once.

JSFiddle available here.

If you don't want to filter out the duplicates, you can use this:

<div ng-app="MyApp">
  <div ng-controller="MyController">
    <table>
      <tr ng-repeat="name in names track by $index">
        <td ng-class="{ 'duplicate': names.indexOf(name) !== names.lastIndexOf(name) }">{{name}}</td>
      </tr>
    </table>
  </div>
</div>

edited Feb 21, 2016 at 13:27

answered Feb 21, 2016 at 13:15

Szabolcs Dézsi

8,84323 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user2130345 · Accepted Answer · 2016-02-21 13:15:33Z

0

I think this should work.

<tr ng-repeat="(key, count) in names | count" >
  <td ng-class="{your-highlight-class: count > 1 }">  {{ key }} </td>
</tr>

app.filter('count', function ( ) {
  return function (collection) {

    var result = {};
    collection.forEach( function( elm ) {

      if(!result[elm]) {
        result[elm] = 0;
      }

      result[elm]++;
    });

    return result;
  }
}]);

answered Feb 21, 2016 at 13:15

user2130345

562 bronze badges

Collectives™ on Stack Overflow

Highlight filtered rows in Angular JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related