angularjs - How to change other element classes by clicking on an element inside ng-repeat

Question

I have an ng-repeat code in angularjs like this:

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

Also a result table like this:

what I'm looking is: when a user clicks on the first column for sorting, the other columns icon will be changed to the defualt icon like the first column. and icon of the first column, will be changed to sorted icon.

what happens right now is, other icons won't be changed when for example a user clicks on the first column sort icon.

Answer 1

你可以试试下面的代码。您还可以检查此 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);
}