Question

我正在尝试从http请求中填充表格。当我单击一个按钮时，我调用showAssociation函数远程加载数据。我首先在页面加载时创建表（ngTableParams），然后在我的请求的.then中调用重新加载。我可以看到数据已更新但表格没有显示任何内容。我正在使用ng-table 0.8.3

任何帮助？

这是我的代码

HTML

 <table ng-table="assocParams" show-filter="true" class="table table-striped">
                <tr ng-repeat="vehiclesRoutesAssociation in vehiclesRoutesAssociations">
                    <td data-title="'Vehicle Registration'" filter="{ 'vehicleReg': 'text' }" sortable="'vehicleReg'">{{vehiclesRoutesAssociation.vehicleReg}}</td>
                    <td data-title="'Route Name'" filter="{ 'routeName': 'text' }" sortable="'routeName'">{{vehiclesRoutesAssociation.routeName}}</td>
                    <td data-title="'Driver Name'" filter="{ 'driverName': 'text' }" sortable="'driverName'">{{vehiclesRoutesAssociation.driverName}}</td>
                    <td data-title="'Valid from'" >{{vehiclesRoutesAssociation.startDateTime}}</td>
                    <td data-title="'Valid to'" >{{vehiclesRoutesAssociation.stopDateTime}}</td>
                    <td class="rowTd">
                        <div class="pull-right margin-right-10">
                            <input type=button class="btn btn-primary btn-o btn-sm" id="deleteRowBtn{{vehiclesRoutesAssociation.id}}" value="delete" ng-confirm-click="Are you sure you want to delete this entry from the database?" confirmed-click="deleteAssociation(vehiclesRoutesAssociation.id)">
                        </div>
                    </td>
                    <td class="rowTd">
                        <div class="pull-right margin-right-10">
                            <input type=button class="btn btn-primary btn-o btn-sm" id="editRowBtn{{vehiclesRoutesAssociation.id}}" value="edit" ng-click="editAssociation('lg',vehiclesRoutesAssociation)">
                        </div>
                    </td>
                </tr>
            </table>

JS

app.controller('vehiclesAssociationCtrl', ["$scope", "$filter", "ngTableParams", "$rootScope", "$modal", "vehiclesManager", function ($scope, $filter, ngTableParams, $rootScope, $modal, vehiclesManager) {
   

    $scope.vehiclesRoutesAssociations = [];

    populateAssocTable();

    

    $scope.showAssociation = function () {
        if ($('#startDateTimeList').data("DateTimePicker").date() != null && $('#stopDateTimeList').data("DateTimePicker").date() != null) {
            $scope.vehiclesRoutesAssociations = [];
           

         
            // send date in following format 2017-08-25T05_45_36
            var from = $('#startDateTimeList').data("DateTimePicker").date();
            var to = $('#stopDateTimeList').data("DateTimePicker").date();

            var tzoffset = (new Date(from)).getTimezoneOffset() * 60000; //offset in milliseconds
            var localISOTimeFrom = (new Date(from - tzoffset)).toISOString().split('.')[0];

            tzoffset = (new Date(to)).getTimezoneOffset() * 60000; //offset in milliseconds
            var localISOTimeTo = (new Date(to - tzoffset)).toISOString().split('.')[0];

            //console.log("localISOTimeFrom" + localISOTimeFrom.replace(/:/g,"_"));
            //console.log("localISOTimeTo" + localISOTimeTo.replace(/:/g,"_"));

            vehiclesManager.loadVehiclesAndRoutesAssociations(localISOTimeFrom, localISOTimeTo).then(function (assocList) {
                if (assocList != null) {
                    //console.log('GET ASSOCIATION LIST ' + JSON.stringify(assocList));
                    $scope.vehiclesRoutesAssociations = assocList;
                    // console.log('GET ASSOCIATION LIST ' + JSON.stringify($scope.vehiclesRoutesAssociations));

                    $scope.assocParams.reload();
                    
                   
                }

            });
        }
    }

    function populateAssocTable() {
        $scope.assocParams = new ngTableParams({
            page: 1, // show first page
            count: 100, // count per page
            sorting: { Reg: "asc" }
        }, {
                total: $scope.vehiclesRoutesAssociations.length, // length of data
                getData: function ($defer, params) {
                    console.log('n populateAssocTable getdata length ' + $scope.vehiclesRoutesAssociations.length);
                    params.data = $scope.vehiclesRoutesAssociations;
                    // use build-in angular filter
                    var orderedData = params.sorting() ? $filter('orderBy')($scope.vehiclesRoutesAssociations, params.orderBy()) : $scope.vehiclesRoutesAssociations;
                    var filteredData = params.filter() ? $filter('filter')(orderedData, params.filter()) : orderedData;
                    $scope.vehiclesRoutesAssociations = filteredData.slice((params.page() - 1) * params.count(), params.page() * params.count());

                    params.total(filteredData.length);
                    // set total for recalc pagination
                    console.log('n populateAssocTable data length ' + params.data.length);
                    $defer.resolve($scope.vehiclesRoutesAssociations);
                }
            });
    }

}]);

Answer 1

您要在ng-repeat中使用$data代替vehiclesRoutesAssociations，因为您正在使用$scope.vehiclesRoutesAssociations解决$ defer。

你的HTML将是。

＆＃13;

<table ng-table="assocParams" show-filter="true" class="table table-striped">
                <tr ng-repeat="vehiclesRoutesAssociation in $data">
                    <td data-title="'Vehicle Registration'" filter="{ 'vehicleReg': 'text' }" sortable="'vehicleReg'">{{vehiclesRoutesAssociation.vehicleReg}}</td>
                    <td data-title="'Route Name'" filter="{ 'routeName': 'text' }" sortable="'routeName'">{{vehiclesRoutesAssociation.routeName}}</td>
                    <td data-title="'Driver Name'" filter="{ 'driverName': 'text' }" sortable="'driverName'">{{vehiclesRoutesAssociation.driverName}}</td>
                    <td data-title="'Valid from'" >{{vehiclesRoutesAssociation.startDateTime}}</td>
                    <td data-title="'Valid to'" >{{vehiclesRoutesAssociation.stopDateTime}}</td>
                    <td class="rowTd">
                        <div class="pull-right margin-right-10">
                            <input type=button class="btn btn-primary btn-o btn-sm" id="deleteRowBtn{{vehiclesRoutesAssociation.id}}" value="delete" ng-confirm-click="Are you sure you want to delete this entry from the database?" confirmed-click="deleteAssociation(vehiclesRoutesAssociation.id)">
                        </div>
                    </td>
                    <td class="rowTd">
                        <div class="pull-right margin-right-10">
                            <input type=button class="btn btn-primary btn-o btn-sm" id="editRowBtn{{vehiclesRoutesAssociation.id}}" value="edit" ng-click="editAssociation('lg',vehiclesRoutesAssociation)">
                        </div>
                    </td>
                </tr>
            </table>

＆＃13;

ng-table重新加载不更新表

1 个答案: