我的屏幕上有两张桌子:
(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表的观察器。这意味着数据不会提供给站点表参数。任何解释为什么会发生这种情况。
答案 0 :(得分:2)
加载控制器时会调用 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
。