Question

我的屏幕上有两张桌子：

（1）

<table id="users" class="widget" ng-table="usersTableParams">
                    <tr ng-repeat = "user in $data" ng-click="usersClicked($event, user.userId);">
                        <td >{{user.userId}}</td>
                        <td >{{user.roleName}}</td>
                    </tr>
                </table>

（2）

<table class="widget" ng-table="sitesTableParams">
                    <tr ng-repeat = "site in $data">
                        <td >{{site.site}}</td>
                        <td >{{site.country}}</td>
                        <td >{{site.region}}</td>
                        <td >{{site.selected == true ? "Yes" : "No"}}</td>
                        <td >
                            <input type="checkbox" ng-checked="{{site.selected}}" ng-model="site.selected"></input>
                        </td>
                    </tr>
                </table>

我在两个表中加载数据的脚本：

$scope.users =[];
$scope.sitesAssigned =[];   

$scope.selectedUsers = {
            users: []
        };


$scope.usersTableParams = new ngTableParams({
            page: startPage,
            count: rowsPerPage,
            sorting: {
                userId: 'asc'
            },
            filter: {
                userId: '',
                roleName:''
            }
        },
        {
            total: $scope.users.length,
            getData: function($defer, params){
                var orderedData = getFilteredSortedData($scope.users, params);
                params.total(orderedData.length);
                var slicedData = getSlicedData(orderedData,params);
                if(null != slicedData && slicedData.length > 0){
                    var user = slicedData[0];
                    if(user.hasOwnProperty('userId')){
                        $scope.selectedUsers.users.push(user.userId);
                        console.log('Selected User: '+JSON.stringify($scope.selectedUsers));
                    }
                }
                $defer.resolve(slicedData);
            }
        });


        $scope.sitesTableParams = new ngTableParams({
            page: startPage,
            count: rowsPerPage,
            sorting: {
                site: 'asc'
            },
            filter:{
                site: '',
                country: '',
                region: ''
            }
        },
        {
            total: $scope.sitesAssigned.length,
            getData: function($defer, params){
                var orderedData = getFilteredSortedData($scope.sitesAssigned, params);
                params.total(orderedData.length);
                var slicedData = getSlicedData(orderedData, params);
                $defer.resolve(slicedData);
            }
        }); 
$scope.$watch('sitesTableParams', function(newValue, oldValue){
            console.log('Old value of sitesTableParams: '+JSON.stringify(oldValue));
            console.log('New value of sitesTableParams: '+JSON.stringify(newValue));
        }, true);

            $scope.$watch('selectedUsers', function(newValue, oldValue){
            console.log('Old value of selected users: '+JSON.stringify(oldValue));
            console.log('New value of selected users: '+JSON.stringify(newValue));
            var users = $scope.selectedUsers.users[0];
            console.log('Fetch sites assigned to user: '+users);
            console.log('Sites table params before fetching sites data: '+JSON.stringify($scope.sitesTableParams));
            mlmSiteAssignments.getSites(users).then(function(data){ 
                console.log('List of sites received from service: '+JSON.stringify(data));
                angular.forEach(data, function(site ){
                    $scope.sitesAssigned.push({
                        site: site.site,
                        country: site.country,
                        region: site.region,
                        selected: site.selected
                    });
                });
                $scope.sitesTableParams.data = $scope.sitesAssigned;
                $scope.siteAssignmentsTableParams.reload();
                console.log('Sites table params after fetching sites data: '+JSON.stringify($scope.sitesTableParams));
            });

        }, true);



        var getFilteredSortedData = function(data, params) {
            if (params.filter()) {
                data = $filter('filter')(data, params.filter());
            }
            if (params) {
                data = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
            }
            return data;
        };

        var getSlicedData = function(data, params) {
             var slicedData = data.slice((params.page() - 1) * params.count(), params.page() * params.count());
             return slicedData;
        };

点击“usersTableParams＆＃39;”中的一行“网站中的数据”表格＆＃39;应该加载。点击“usersTableParams＆＃39;中的一行”。我正在获取第二个表的数据，但是这样获得的数据没有在页面中呈现。

我已经被困在这个问题好几天了，无法找到任何解决方案。欢迎任何建议/更正/指示。

运行上面的代码时，控制台说：

Old value of sitesTableParams: {"data":[],"$params":{"page":1,"count":10,"filter":{"site":"","country":"","region":""},"sorting":{"site":"asc"},"group":{},"groupBy":null},"filterBuffer":{}}
New value of sitesTableParams: {"data":[],"$params":{"page":1,"count":10,"filter":{"site":"","country":"","region":""},"sorting":{"site":"asc"},"group":{},"groupBy":null},"filterBuffer":{}}
Old value of selected users: {"users":[]}
New value of selected users: {"users":[]}
Fetch sites assigned to user: undefined
Sites table params before fetching sites data: {"data":[],"$params":{"page":1,"count":10,"filter":{"site":"","country":"","region":""},"sorting":{"site":"asc"},"group":{},"groupBy":null},"filterBuffer":{}}
List of sites received from service: []
Sites table params after fetching sites data: {"data":[],"$params":{"page":1,"count":10,"filter":{"site":"","country":"","region":""},"sorting":{"site":"asc"},"group":{},"groupBy":null},"filterBuffer":{}}
Selected User: {"users":["abc.COM"]}
Old value of selected users: {"users":[]}
New value of selected users: {"users":["abc.COM"]}
Fetch sites assigned to user: abc.COM
Sites table params before fetching sites data: {"data":[],"$params":{"page":1,"count":10,"filter":{"site":"","country":"","region":""},"sorting":{"site":"asc"},"group":{},"groupBy":null},"filterBuffer":{}}
List of sites received from service: [DATA ARRAY]
Sites table params after fetching sites data: {"data":[],"$params":{"page":1,"count":10,"filter":{"site":"","country":"","region":""},"sorting":{"site":"asc"},"group":{},"groupBy":null},"filterBuffer":{}}

因此，日志表明即使我获取了用于填充数据的变量中的数据，也不会调用sites表的观察器。这意味着数据不会提供给站点表参数。任何解释为什么会发生这种情况。

Answer 1

加载控制器时会调用 ng-table 的getData函数。您正在与'getData'函数分开进行异步调用，因此无法保证在调用getData函数时将检索数据。

ng-table 在ngTableParams对象上提供了一种重新加载数据的方法（即它再次为您调用getData）。例如：

*ngTableParams*.reload();

在loadUserSites中，您应该调用此方法来更新表数据，如下所示：

mlmSiteAssignments.getSites(users).then(function(data){                 
    angular.forEach(data, function(site){
        $scope.sitesAssigned.push({
            site: site.site,
            country: site.country,
            region: site.region,
            selected: site.selected
        });
    });
    $scope.siteAssignmentsTableParams.reload();
});

反过来，这会调用getData，这将解析您的视图的已排序/分页$data。

ngTable无法加载数据

1 个答案: