如何通过单击 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>

还有这样的结果 table：

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

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

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