我如何将一个键绑定到angular js中的排序类型？

Question

there is a get request which conatins key:value data now i have a table header which contains key and value i want it to sort the value as it could be done before:

 <th>
    <a href="#" ng-click="sortType = 'scenarioNo'; sortReverse = !sortReverse">
    scenarioNo
    <span ng-show="sortType == 'scenarioNo' && !sortReverse" class="fa fa-caret-down"></span>
    <span ng-show="sortType == 'scenarioNo' && sortReverse" class="fa fa-caret-up"></span>
    </a>
</th>

now i want to do it dynamically as such the key will be a table head and the values could then be sorted on click of the header:

    <tr ng-repeat="item in myEntity | limitTo:1">
    <th></th>
    <th ng-repeat="(key,value) in item">
        <a href="#" ng-click="sortType = '{{key}}'; sortReverse = !sortReverse">{{key}}<span ng-show="sortType == '{{key}}' && !sortReverse" class="fa fa-caret-down"></span>
  <span ng-show="sortType == '{{key}}' && sortReverse" class="fa fa-caret-up"></span>
  </a>
    </th>
</tr>

i have used the angular sortRevers to sort the values of the table. how can i make the headers clickable and sortable..? does data binding work inside the sorttype like in the above code

Answer 1

Do the sort in the controller instead of on the html page

<tr ng-repeat="item in myEntity | limitTo:1">
     <th></th>
     <th ng-repeat="(key,value) in item">
         <a href="#" ng-click="sort(key, !sortReverse)">{{key}}
         <span class="fa" 
               ng-if="sortType == key"
               ng-class="{'fa-caret-down' :  sortReverse, 'fa-caret-up' : !sortReverse}">
          </span>
     </a>
     </th>
</tr> 

and the controller

sort(key, sortReverse){
  //Do the sortlogic
  $scope.sortType = sortReverse;
  $scope.key = key;
}

Answer 2

You must use global scope (in controller) sort parameters because ng-repeat has is own scope.

Very similar example like @Bo Vandersteene add, but works and with Fiddle:

  <tr ng-repeat="item in myEntity | limitTo:1">
       <th></th>
       <th ng-repeat="(key,value) in item">
           <a href="#" ng-click="sort(key, !sortReverse)">
            {{key}}
            <span class="fa" ng-class="{'fa-caret-down' :  sortReverse, 'fa-caret-up' : !sortReverse}" ng-show="sortKey == key"></span>
           </a>
       </th>
  </tr> 

In controller:

$scope.sort = function(key, reverse) {
  $scope.sortKey = key;
  $scope.sortReverse = !$scope.sortReverse;
}

Fiddle: https://jsfiddle.net/23z8urzw/1/