单击标题时排序ngTable不起作用

时间:2014-02-26 16:27:57

标签: javascript angularjs sorting ngtable

我目前正在开发一个需要进行排序的表。由于项目使用的是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);
                    });
                }
            });
        }
    };

3 个答案:

答案 0 :(得分:2)

然而,这个问题尚不清楚,ngTable的例子使用的是v0.3.1,而我使用的是v0.3.2。通过开始使用旧版本解决了这个问题。

答案 1 :(得分:1)

我也遇到过这个问题,v0.3.2中可能存在一些错误

我通过用以下行替换ng-table代码中的第502行来修复此问题:

var sortingParams = (event && (event.ctrlKey || event.metaKey)) ? $scope.params.sorting() : {};

我不确定这是正确的解决方法(不确定为什么&#39;事件&#39;未定义)但它解决了我的问题。所以请不要把它作为一个合适的解决方案,它只是我的2便士。

答案 2 :(得分:1)

我遇到过这个问题,这是一个回复格式问题 问题是因为我正在返回一个对象而不是数组,例如:

格式错误:

{
"data": {
    "items": { 
        "0": {
            "post_id": "26",
            "post_date": "2015-06-24 00:00:00"

良好的格式:

{
"data": {
    "items": [
        {
            "id": "26",
            "create_date": "2015-02-19 14:15:44",

该表也适用于对象,但不是所有函数。