我最近一直在使用ngTableDynamic指令,当我确切地知道我的表应该期望的列时,它工作得很好.但是,当我的表真正动态并且我事先并不知道期望的列的数量或类型时,我遇到了问题.
在我的控制器的顶部,我声明我知道的列将出现在每个表中：
$scope.columns = [
{ title: 'ID',field: 'id',visible: true,required: true },{ title: 'Email',field: 'email',required: true }
];
然后我对一个返回结果的服务进行异步调用.根据这些结果,我将任何其他列对象推送到$scope.columns：
var getResults = function() {
var defer = $q.defer();
reportService.getReportResults({
report: $scope.id,version: $scope.version
}).$promise.then(function(data) {
$scope.data = data.results;
_.each($scope.data[0],function(value,key) {
if (key !== 'id' && key !== 'email') {
$scope.columns.push({
title: _str.capitalize(key),field: key,required: false
});
}
});
defer.resolve($scope.data);
});
return defer.promise;
};
但是,当我在浏览器中查看时,_.each中推送的列永远不会进入我的表.但是,如果我用一组示例数据的硬编码模拟替换我的异步调用,则会添加列,并且所有内容都按预期工作：
var getResults = function() {
var defer = $q.defer();
$scope.data = [{"id":"1","email":"test@sample.com","create_date":"2013-09-03T09:00:00.000Z"},{"id":"2","email":"sample@test.org","create_date":"2013-09-03T11:10:00.000Z"}];
_.each($scope.data[0],key) {
if (key !== 'id' && key !== 'email') {
$scope.columns.push({
title: _str.capitalize(key),required: false
});
}
});
defer.resolve($scope.data);
return defer.promise;
};
在我的控制器中,我的初始化代码调用
getResults().then(function() {
$scope.tableParams.reload();
});
$scope.tableParams = new ngTableParams({...
我的假设是,只要承诺得到解决,$scope.tableParams.reload();在$scope.columns更新之前调用.
最佳答案
基于文档中的demo,它很可能是以promises为例.
看来你必须在从promise获得响应后创建新的tableParams和cols对象.向现有cols添加行可能不会触发观察者.
看来你必须在从promise获得响应后创建新的tableParams和cols对象.向现有cols添加行可能不会触发观察者.
angular.module('app',['ngTable']);
angular.module('app').controller('Demo',function($scope,NgTableParams,dataService) {
$scope.cols = [{
title: 'ID',visible: true
},{
title: 'Email',{
title: 'Create Date',field: 'create_date',visible: true
}];
dataService
.getData()
.then(function (response) {
$scope.tableParams = new NgTableParams({},{
dataset: response.results
});
$scope.cols = $scope.cols.concat(response.cols);
});
});
angular.module('app').factory('dataService',function($timeout) {
return {
getData: function() {
return $timeout(function() {
var n = Math.round(Math.random() * 50) + 5;
var results = [];
for (var i = 0; i < n; i++) {
results.push({
id: Math.random(),email: 'ex' + Math.random() + '@example.com',create_date: new Date(),x: Math.round(Math.random() * 10),y: Math.round(Math.random() * 25)
});
}
return {
results: results,cols: [
{
title: 'X',field: 'x',visible: true
},{
title: 'Y',field: 'y',visible: true
}
]
};
},500);
}
};
});