現在、ソートが必要なテーブルに取り組んでいます。プロジェクトは Angular (v1.2.12) を使用しているため、ngTableモジュール (v0.3.2) の使用を開始しました。
デフォルトの並べ替えはタイトルですが、並べ替えオプションとして年を使用することもできます。ページをロードすると正常に動作しますが、テーブルの見出しをクリックすると、クリックした列がソートされますが、ソートはヘッダーに反映されず、ソート パラメータも設定されなくなります。
デバッグを開始すると、params.sorting() が次を返すことがわかります: {title: undefined}その瞬間から、ソート可能なヘッダーをクリックすることもできなくなり、何もしなくなりました。
私は何かが欠けていると思いますが、何かを見つけることができないようです
私のデータは次のとおりです。
[{
"year": 2014,
"title": "Golden title"
}, {
"year": 2013,
"title": "Golden title"
}, {
"year": 2013,
"title": "Another title"
}, {
"year": 2014,
"title": "Whetshoverwerd xsade aas"
}, {
"year": 2013,
"title": "Another brilliant title"
}, {
"year": 2013,
"title": "Wherever I may SOAP"
}]
景色:
<table ng-table="tableParams" class="table">
<tbody>
<tr ng-repeat="document in $data">
<td data-title="'Year'" sortable="'year'">{{document.year}}</td>
<td data-title="'Title'" sortable="'title'"><a href="#">{{document.title}}</a></td>
</tr>
</tbody>
</table>
ビューはディレクティブです。
angular.module('appDirectives').directive('myModuleDirective', function () {
// Runs during compile
return {
restrict: 'E',
templateUrl: 'path/to/view.html',
replace: true,
controller: function ($scope, $timeout, $filter, TitleList, ngTableParams) {
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
title: 'asc' // initial sorting
}
}, {
total: 0, // length of data
getData: function ($defer, params) {
TitleList.get({}, function (data) {
var orderedData = params.sorting() ?
$filter('orderBy')(data, params.orderBy()) :
data;
params.total(orderedData.length);
orderedData = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
$defer.resolve(orderedData);
});
}
});
}
};