javascript - Angular 重复顺序不适用于嵌套范围

Question

我有一个 html 表，其中行是对象，数据是属性:

$scope.rows = [
    { row_id: 1,row_selected:false, data: { col_1: "a", col_2: "b", col_3: "c" } },
    { row_id: 2,row_selected:false, data: { col_1: "d", col_2: "e", col_3: "f" } },
    { row_id: 3,row_selected:false, data: { col_1: "g", col_2: "h", col_3: "i" } }
]

表中:

   <table border="1">
     <tr>
       <th ng-repeat="col in cols | orderBy:'order':false">
         <a href ng-click='changeOrderBy(col)'>{{col.name}} [{{col.order}}]</a>
       </th>
     </tr>
     <tr ng-repeat="row in rows | orderBy:data[orderBy]:reverse | filter:filter">
       <td ng-repeat="col in cols | orderBy:'order':false">
         {{row.data[col.field]}}
       </td>
     </tr>
   </table>

我尝试使用 orderBy:data[orderBy] 和 orderBy:'data[orderBy]'

changeOrderBy 函数:

    $scope.changeOrderBy = function(col){
      if($scope.orderBy == col.field){
        $scope.reverse = !$scope.reverse;
      }
      $scope.orderBy = col.field;
    }

但在我看来，这似乎不是对行进行排序，我想这将是一个类似的过滤器解决方案

jsFiddle

Answer 1

我找到了这个解决方案，添加前缀“数据”。字段前，如下

orderBy = 'data.col_1'

js:

$scope.orderBy = null;
$scope.reverse = false;
$scope.changeOrderBy = function(col){
  var prefix = 'data.';
  if($scope.orderBy == prefix + col.field){
    $scope.reverse = !$scope.reverse;
  }
  $scope.orderBy = prefix + col.field;
}

html:

<tr ng-repeat="row in rows | orderBy:orderBy:reverse">

updated jsFiddle