在Angular JS中突出顯示已過濾的行

Question

我有一個需要突出顯示重複值的數組。這是我迄今爲止..

HTML

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

<style> 
.duplicate{ 
background: yellow; 

} 
</style> 

控制器：

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

      ]; 
     }); 

編輯：在上面"Philip"的例子被突出顯示，並會對duplicate

Answer 1

你可以這樣實現它：

<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> 

這對於其中indexOf返回比lastIndexOf不同值的元素應用duplicate類。這隻能發生在數組中的項目不止一次。

JSFiddle available here。

如果您不希望過濾掉重複的，你可以使用這個：

<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> 

Answer 2

我認爲這應該工作。

<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; 
    } 
}]);