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>

这适用于duplicate类，其中indexOf返回的值不同于lastIndexOf。这只能在阵列中多次出现的项目中发生。

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

突出显示Angular JS中已过滤的行

2 个答案: