使用ng repeat在angularJS中显示排序图标

我无法在列排序时显示正确的图标，如果我单击一列进行排序，则所有其他列的图标也会更新。
只有已排序的列才应获得相应列排序的更新。
我在这里列出了我的代码：

HTML代码：

---

在

ng if

语句中，您没有检查该列是否为排序列（谓词）：

---

已更新。

我正在使用给定的答案运行此操作，在标题中看不到任何上下箭头，是否需要除此之外的任何内容。在中可以看到相同的内容plnkr@ArunKumarMudraboyina，听到这个消息我很难过，但我不知道你的代码的任何细节，我不知道你希望得到什么帮助。我已经发布了一个问题。请看这里。。

  <table border="1">
    <thead>
      <tr>
        <th ng-repeat="key in getKeysOfCollection(colors[0])" ng-click="ctrl.predicate = key; ctrl.reverse=!ctrl.reverse;">
          {{key}}
          <span class="fa fa-sort columnSortIcons" ng-if="ctrl.reverse"></span>
          <span class="fa fa-sort-down columnSortIcons" ng-if="!(ctrl.reverse)"></span>
          <span class="fa fa-sort-up columnSortIcons" ng-if="ctrl.reverse"></span>
        </th>
      </tr>
      <tr>
        <th ng-repeat="key in getKeysOfCollection(colors[0])">
          <input type="text" ng-model="search[key]" />
        </th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in colors | filter:search | orderBy:ctrl.predicate:ctrl.reverse">
        <td ng-repeat="key in getKeysOfCollection(item)">{{item[key]}}</td>
      </tr>

    </tbody>
  </table>

  this.predicate='id';
  this.reverse=false;

  $scope.search = {};

  $scope.colors = [{
    'id': 1,
    'productId': 1001,
    'productName': 'prd 1',
    'minimumLevel': 2,
    'price': 12.50,
    'productDate': '2014-11-01T06:41:30.809Z'
  }, {
    'id': 2,
    'productId': 1002,
    'productName': 'prd 2',
    'minimumLevel': 23,
    'price': 12.54,
    'productDate': '2014-11-02T06:41:30.809Z'
  }, {
    'id': 3,
    'productId': 1003,
    'productName': 'prd 3',
    'minimumLevel': 2,
    'price': 12.50,
    'productDate': '2014-11-04T06:41:30.809Z'
  }, {
    'id': 4,
    'productId': 1004,
    'productName': 'prd 4',
    'minimumLevel': 2,
    'price': 12.50,
    'productDate': '2014-11-22T06:41:30.809Z'
  }, {
    'id': 5,
    'productId': 1005,
    'productName': 'prd 5',
    'minimumLevel': 2,
    'price': 12.50,
    'productDate': '2014-11-18T06:41:30.809Z'
  }];

  $scope.getKeysOfCollection = function(obj) {
    obj = angular.copy(obj);
    if (!obj) {
      return [];
    }
    return Object.keys(obj);
  }

<span class="fa fa-sort-down columnSortIcons" ng-if="!(ctrl.reverse) && key == ctrl.predicate"></span>
<span class="fa fa-sort-up columnSortIcons" ng-if="ctrl.reverse && key == ctrl.predicate"></span>