如何通过单击ng-repeat内的元素来更改其他元素类

Question

我在angularjs中有一个ng-repeat代码，如下所示：

<th ng-repeat="row in results.rows track by $index">
  {{row.name | translate}}
  <a class="sort" 
     ng-click="orderResultDataEvent($index)" 
     ng-if="results.tableOptions.sortable">
    <i ng-class="{'icon icon-exc-column-hover-sort': row.isReverseOrder == null,'icon icon-exc-sort-numeric-1-9': row.isReverseOrder === false , 'icon icon-exc-sort-numeric-9-1': row.isReverseOrder === true }" 
       class="text-white" 
       aria-hidden="true">
    </i>
  </a>
</th>

还有这样的结果表：

我正在寻找的是：当用户单击第一列进行排序时，其他列的图标将像第一列一样更改为默认图标。和第一列的图标将更改为已排序的图标。

现在发生的事情是，例如，用户单击第一列排序图标时，其他图标将不会更改。

Answer 1

您可以尝试使用以下代码。您还可以检查this plunker中的工作示例方案。

模板：

<th ng-repeat="hed in results.header track by $index"  ng-click="setSelected($index)">
   {{hed.value}}
   <a class="sort">
      <span class="actual" ng-class="{'toggle': $index === selectedId }">#</span>
   </a>
</th>

控制器：

$scope.selectedId = null;
$scope.setSelected = function($index) {
   $scope.selectedId = $index;
   console.log($scope.selectedId);
}