web-dev-qa-db-ja.com

ng-tableの並べ替えが機能しない

Ng-tableを使用してアプリケーションを作成しましたが、ng-tableを使用してテーブルを生成したアプリケーションは正常に動作しています。私が直面している問題は、テーブルの並べ替えが機能していないことです。私のコードは以下の通りです

作業デモ

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>

スクリプト

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()));
        }
    });
});
javascriptangularjssortingngtable
8
Alex Man
$defer.resolve($filter('orderBy')($scope.myValues, params.orderBy()));

ソートされた新しい配列を作成しますが、$scope.myValuesは変更しません。

したがって、どちらの場合も、毎回$scope.myValuesをソートされた配列に設定します。

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

または、myValuesの代わりに$dataでng-repeatを使用します。

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

HTMLで、myValuesを$ dataに更新する必要があります。

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

プランカー

4
BatteryAcid

_$scope.myValues_に書き込み、それを_ng-repeat_ディレクティブで使用していますが、データはテーブルparamsオブジェクトのgetData()でのみ並べ替えています。

getData()は_$scope.myValues_を変更せず、ソートされた配列を返すためにのみ使用します。あなたが本当にやりたいことは：

  • スコープで完全なデータセットを使用できるようにするのではなく、コントローラー内の変数に格納します。

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

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

  • HTMLコード内で_$data_を使用します。これは、getData()にアクセスするためです。

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

3
yerforkferchips