我如何将钥匙绑定到Angular JS中的类型类型

Question

有一个get请求，该请求可以连接键：值数据现在我有一个表标头，其中包含键和值，我希望它可以按照以前的方式对值进行排序：

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

现在，我想动态地进行操作，因为密钥将是一个表格，然后可以在单击标头时对值进行排序：

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

我已经使用了角度的零工来对表的值进行排序。如何使标头可以单击且可排序。数据绑定在sorttype中是否像上述代码

Answer 1

在控制器中而不是在HTML页面上进行排序

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

和控制器

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

Answer 2

您必须使用全局范围（在控制器中）排序参数，因为ng-repeat具有自己的范围。

非常相似的示例，例如@bo vandersteene添加，但可以使用小提琴：

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

在控制器中：

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

小提琴：https：//jsfiddle.net/23z8urzw/1/