AngularJS ng-repeat启用对表列的排序

AngularJS ng-repeat enable sorting on table columns

本文关键字：排序 ng-repeat 启用 AngularJS      更新时间：2023-09-26

我正在从JSONObject数组创建一个表。并希望在列标题单击时启用排序。我的代码如下。

<table>
    <tr ng-repeat-start="record in records | orderBy:columnToOrder:reverse" ng-if="$first">
        <td>S.No</td><td ng-repeat="(key,value) in record " ng-click="columnToOrder=key;reverse=!reverse">{{key}}</td>
    </tr>
    <tr ng-repeat-end >
        <td>{{$index+1}}</td><td ng-repeat="(key,value) in record ">{{value}}</td>
    </tr>
</table>

我的数据看起来像 

[
{ Count="85923", Property Name="Name 1"},
{ Count="85933", Property Name="Name 2"},
{ Count="85953", Property Name="Name 3"},
{ Count="85973", Property Name="Name 4"}
]

但是此代码不起作用。也没有显示任何错误。请帮助我启用此功能。

不要使用内联，而是定义一个排序方法并在单击期间使用该方法，因为如果变量是内联定义的，则变量是在子作用域中创建的，并且它不适用于父 ng-repeat-start 作用域。

控制器

 $scope.order =function(key) {
    $scope.columnToOrder=key;
    $scope.reverse= !$scope.reverse
};

.HTML

<table>
        <tr ng-repeat-start="record in records | orderBy:columnToOrder:reverse" ng-if="$first">
            <td>S.No</td><td ng-repeat="(key,value) in record " ng-click="order(key)">{{key}}</td>
        </tr>       
        <tr ng-repeat-end>
            <td>{{$index+1}}</td><td ng-repeat="(key,value) in record">{{value}}</td>
        </tr>
    </table>
相关文章：