5

我正在使用 ng-table 显示来自 API 调用的信息,我将其分组为网站上的示例。

但是,网站上的示例使用静态信息,因为我每次都需要进行新的 API 调用。当我不包含 $scope.$watch('groupby', function(value)函数时,我会慢慢显示第一个初始调用的表格。

angular.module('myApp.controllers', ['ngTable','ui.bootstrap','dialogs'])
.controller('HomeCtrl', function($scope,$log, $rootScope, $modal, TimeService, EventServiceAPI, $filter, ngTableParams) {
    var datum = new Date().setHours(0,0,0,0);
    $scope.datum = datum;
    var timestamp = Math.round(new Date().getTime()/1000);


    var findAllEvents = function(timestampdata) {
        EventServiceAPI.query({start: timestampdata, end: timestampdata + 3*24*60*60}).$promise.then(function(data) {

            //var data = $filter('orderBy')(data, 'event.startHour');

            $scope.$watch("data", function () {
                $scope.tableParams.reload();
            }); 

            $scope.tableParams = new ngTableParams({
                page: 1,            // show first page
                count: 100          // count per page

            }, {
                groupBy: function(item) {
                    return 'Start vanaf ' + item.event.startHour + ' uur';
                },
                total: data.length,
                getData: function($defer, params) {
                    var orderedData = params.sorting() ?
                            $filter('orderBy')(data, 'event.startHour') :
                            data;

                    $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                }
            });

            $scope.$watch('groupby', function(value){
                $scope.tableParams.settings().groupBy = value;
                console.log('Scope Value', $scope.groupby);
                console.log('Watch value', this.last);
                console.log('new table',$scope.tableParams);
                $scope.tableParams.reload();
            });
        })
    };    

    findAllEvents(timestamp);

    $scope.getEarlier = function() {
        datum -= (24 * 60 * 60 * 1000);
        $scope.datum = datum;
        var timestamp = Math.round(datum/1000);
        console.log(timestamp);
        findAllEvents(timestamp);

    };
});

编辑:

我现在可以显示数据,但是不显示组:

var datum = new Date().setHours(0,0,0,0);
    $scope.datum = datum;
    var timestamp = Math.round(new Date().getTime()/1000);

    EventServiceAPI.query({start: timestamp, end: timestamp + 3*24*60*60}).$promise.then(function(data) { $scope.data = data; initlizeTable(); });


    var initlizeTable = function() {
        // Table
        $scope.tableParams = new ngTableParams({
            page: 1,            // show first page
            count: 100          // count per page

        }, {
            groupBy: function(item) {
                return 'Start vanaf ' + $scope.data.event.startHour + ' uur';
            },
            total: $scope.data.length,
            getData: function($defer, params) {
                var data = EventServiceAPI.query({start: timestamp, end: timestamp + 3*24*60*60});
                var orderedData = params.sorting() ?
                        $filter('orderBy')($scope.data, 'event.startHour') :
                            $scope.data;

                        $defer.resolve($scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
            }, $scope: { $data: $scope.data }
        });

        $scope.$watch('groupby', function(value){
            $scope.tableParams.settings().groupBy = value;
            console.log('Scope Value', $scope.groupby);
            console.log('Watch value', this.last);
            console.log('new table',$scope.tableParams);
            $scope.tableParams.reload();
        });

        $scope.$watch('data', function(value){
            $scope.tableParams.settings().groupBy = value;
            console.log('Scope Value', $scope.groupby);
            console.log('Watch value', this.last);
            console.log('new table',$scope.tableParams);
            $scope.tableParams.reload();
        });

    }
4

3 回答 3

6

我知道这为时已晚,但我认为最好为其他寻求同一问题答案的人发表评论。

我也遇到了同样的问题,并按照以下 URL 中的示例进行了修复。

https://github.com/esvit/ng-table/blob/master/src/scripts/04-controller.js

在“ngTableParams”实例创建后,我刚刚将以下代码行添加到我的代码中。

$scope.params.settings().$scope = $scope;
于 2014-09-06T06:10:02.797 回答
1

这是它开始为我工作的时候。我在 params.settings 中添加了范围。

controller: function() {
...
 $scope.myTableParams = new ngTableParams({
.
},{
...
getData: function ($defer, params) {
   if (params.settings().$scope == null) {
         params.settings().$scope = $scope;
   }
.
.
}
于 2015-10-19T13:09:07.770 回答
0

这里看看,为ngTableParams设置所有参数解决了这个问题

于 2014-10-03T06:41:08.010 回答