Javascript ng-table 排序不起作用

ng-table sorting not working

提问by Alex Man

I have created an application using ng-table, the application is working fine which had generated table using ng-table. The problem which i am facing is that the table sorting is not working. My code is as given below

我使用 ng-table 创建了一个应用程序，该应用程序运行良好，使用 ng-table 生成了表。我面临的问题是表格排序不起作用。我的代码如下

Working Demo

工作演示

html

html

<table ng-table="tableParams" class="table">
        <tr ng-repeat="user in myValues">
            <td data-title="'Name'" sortable="'name'">
                {{user.name}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
        </tr>
</table>

script

脚本

var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, $filter, ngTableParams) {
    $scope.myValues = [{name: "Moroni", age: 50},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34}, 
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34}];

    $scope.tableParams = new ngTableParams({
        sorting: {
            name: 'asc'     
        }
    }, {
        getData: function($defer, params) {
            $defer.resolve($filter('orderBy')($scope.myValues, params.orderBy()));
        }
    });
});

回答by manji

$defer.resolve($filter('orderBy')($scope.myValues, params.orderBy()));

will create a new sorted array but will not change $scope.myValues.

将创建一个新的排序数组，但不会改变$scope.myValues。

So either, you set $scope.myValuesto the sorted array each time:

因此，您$scope.myValues每次都设置为已排序的数组：

$scope.myValues = $filter('orderBy')($scope.myValues, params.orderBy());
$defer.resolve($scope.myValues);

Or use $datain ng-repeatinstead of myValues:

或使用$datainng-repeat代替myValues：

<tr ng-repeat="user in $data">

回答by BatteryAcid

In your HTML you need to update the myValues to be $data.

在您的 HTML 中，您需要将 myValues 更新为 $data。

<tr ng-repeat="user in $data">

Plunker

普朗克

回答by yerforkferchips

You're writing to $scope.myValues, and using that in the ng-repeatdirective - but you're sorting the data only in getData()on the table params object.

您正在写入$scope.myValues，并在ng-repeat指令中使用它- 但您仅在getData()表 params 对象上对数据进行排序。

getData()doesn't ever change $scope.myValues, it only uses it to return a sorted array. What you really want to do is:

getData()永远不会改变$scope.myValues，它只使用它来返回一个排序的数组。你真正想做的是：

• Don't make the full dataset available on the scope, but store it in a variable inside the controller:

• 不要在范围内提供完整的数据集，而是将其存储在控制器内的变量中：

var data = [{name: "Moroni", age: 50}, ...]

var data = [{name: "Moroni", age: 50}, ...]

$defer.resolve($filter('orderBy')(data, params.orderBy()));

$defer.resolve($filter('orderBy')(data, params.orderBy()));

• Use $datainside the HTML code, because this is what accesses getData():

• 使用$data的HTML代码中，因为这是访问getData()：

<tr ng-repeat="user in $data">

<tr ng-repeat="user in $data">