如何在Angular.js中对动态生成的列进行排序?

时间:2015-12-29 19:54:20

标签: javascript angularjs

我正在尝试创建一个显示Impala表的分区统计信息的仪表板。该表上可以包含零个或多个分区列。因此,我最终将分区列表示为名称值对列表。数据看起来有点像这样:

<ArrayOfPartitionStats>
  <PartitionStats>
    <Files>1</Files>
    <Partitions>
      <Partition>
        <Name>applicationname</Name>
        <Value>app1</Value>
      </Partition>
      <Partition>
        <Name>date</Name>
        <Value>2015-10-25</Value>
      </Partition>
    </Partitions>
  </PartitionStats>
  <PartitionStats>
    <Files>1</Files>
    <Partitions>
      <Partition>
        <Name>applicationname</Name>
        <Value>app2</Value>
      </Partition>
      <Partition>
        <Name>date</Name>
        <Value>2015-10-25</Value>
      </Partition>
    </Partitions>
  </PartitionStats>
</ArrayOfPartitionStats>

我想获取每个分区列,并将名称设置为列标题,将值设置为表中的条目,并使每个列都可以排序。

|applicationname|date      |files|
+---------------+----------+-----+
|app1           |2015-10-25|1    |
|app2           |2015-10-25|1    |

现在我用这个生成表格:

<table class="table table-bordered table-hover table-striped">
  <thead>
    <tr>
      <th class="sortable col-md-2" ng-repeat="partition in partitionStats[0].partitions" ng-click="setOrder(partition)">
        {{partition.name}}
        <span ng-show="orderColumn == partition && !orderReverse" class="glyphicon glyphicon-chevron-up"></span>
        <span ng-show="orderColumn == partition && orderReverse" class="glyphicon glyphicon-chevron-down"></span>
      </th>
      <th class="sortable col-md-2" ng-click="setOrder('files')">
        Files
        <span ng-show="orderColumn == 'files' && !orderReverse" class="glyphicon glyphicon-chevron-up"></span>
        <span ng-show="orderColumn == 'files' && orderReverse" class="glyphicon glyphicon-chevron-down"></span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="partition in partitionStats | orderObjectBy:orderColumn:orderReverse">
      <td ng-repeat="partitionHeader in partition.partitions | orderBy: orderColumn:orderReverse">{{partitionHeader.value}}</td>
      <td>{{partition.files | number:0}}</td>
    </tr>
  </tbody>
</table>

我的控制器功能:

$scope.setOrder = function (column){
        if (column == $scope.orderColumn) {
            $scope.orderReverse = !$scope.orderReverse;
        } else {
            $scope.orderColumn = column;
            $scope.orderReverse = false;
        }
    }

我遇到的问题是传入Angular命令的setOrder函数的内容,以便对该列进行排序。现在我传入了对象引用,但是没有正确排序。有关如何为orderBy引用此列的任何想法吗?

0 个答案:

没有答案