1

現在、ソートが必要なテーブルに取り組んでいます。プロジェクトは 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);
                    });
                }
            });
        }
    };
4

3 に答える 3