angularJS：使用 ngTable 排序 table 不起作用

Question

我试着环顾四周，我发现了更多与这个看起来相同的问题，但没有人按照我的方式去做，由于某种原因，它不起作用...

这里是angular代码，

var myAPP = angular.module('myAPP', ['ngTable']);
myAPP.run(function($rootScope, $http, $moment) {

    $rootScope.items = [];
    $rootScope.currentEvent = "";

    // inital stats - items
    $http.get("/wp-content/themes/theme/myjson.php", {
        params: {
            getAll: true,
            watcherID: <?=get_current_user_id()?>
        }
    }).then(function(reponse) {
        $rootScope.items = reponse.data;
    });


    $rootScope.update = function(inital) {

        $rootScope.items = [];

        $http.get("/wp-content/themes/theme/myjson.php", {
            params: {
                sort: true,
                watcherID: <?=get_current_user_id()?>,
                event: $rootScope.currentEvent
            }
        }).then(function(response) {
            $rootScope.items = response.data;
            console.log("data", $rootScope.currentEvent, $rootScope.items);

        });

    } // end update

    $rootScope.$watch('items', function(newValue, oldValue) {
        if(!newValue) return;
        if(newValue != oldValue) {
            $rootScope.items = newValue;
            console.log('new value $rootScope.items', $rootScope.items);
        }
    });


});

myAPP.controller('tbleCtrl', function($scope, $rootScope, $http, ngTableParams) {
    $scope.data = $rootScope.items;
    $rootScope.$watch('items', function(newValue, oldValue) {
        if(!newValue) return;
        if(newValue != oldValue) {
            $scope.data = $rootScope.items;
        }
    });
});

首先我尝试使用 rootScope 来处理东西，但之后我也尝试将它放在一个范围内（我认为将值放在名为 data 的 var 上会有所不同所有的例子），但我也没有运气。

这是我的控制器

<div ng-controller="tbleCtrl">
  <table ng-table show-filter="true" class="floodPostTable">
    <tr>
        <th sortable="number">number</th>
        <th sortable="roadNumber">Road number<br /></th>
    </tr>
    <tr ng-repeat="item in data">
        <td><div ng-show="item.number != false">{{ item.number }}</div></td>
        <td><div ng-show="item.roadNumber != false">{{ item.roadNumber }}</div></td>
    </tr>
  </table>
</div>

如果有人能指出我遗漏了什么或做错了什么，我将不胜感激！

PS：显示了 table 并且它在执行重复时工作正常，但由于某种原因只有排序不起作用。

Answer 1

您没有为 sortable 属性设置正确的值。

该属性需要一个表示字符串的模型。

尝试：

    <div ng-controller="tbleCtrl">
  <table ng-table show-filter="true" class="floodPostTable">    
    <tr ng-repeat="item in data">
        <td sortable="'number'" data-title="'Number'"><div ng-show="item.number != false">{{ item.number }}</div></td>
        <td sortable="'roadNumber'" data-title="'Road Number'"><div ng-show="item.roadNumber != false">{{ item.roadNumber }}</div></td>
    </tr>
  </table>
</div>

您会注意到我删除了您的第 th 个元素，ng-table 将为您创建它们。

您还缺少使用实际的 ngTableParams 实例并将其设置为 ng-table 属性的值。不确定您打算如何在不执行 ngTable 几乎要求您执行的操作的情况下实际显示任何行。

试试看这里：http://bazalt-cms.com/ng-table/example/1

Answer 2

Angular ng-table dynamic headers doesn't work inside

正如那里的答案所说 "Define a template for a header, and set a template-header attribute of ng-table."

Answer 3

而不是 <tr ng-repeat="item in data">

尝试

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

angularJS：使用 ngTable 排序 table 不起作用

angularJS: sorting table with ngTable not working

javascript

angularjs

ngtable