javascript – 根据promise的结果将列添加到动态ng-table

我最近一直在使用ngTableDynamic指令,当我确切地知道我的表应该期望的列时,它工作得很好.但是,当我的表真正动态并且我事先并不知道期望的列的数量或类型时,我遇到了问题.

在我的控制器的顶部,我声明我知道的列将出现在每个表中：

@H_404_8@$scope.columns = [
  { title: 'ID',field: 'id',visible: true,required: true },{ title: 'Email',field: 'email',required: true }
];

然后我对一个返回结果的服务进行异步调用.根据这些结果,我将任何其他列对象推送到$scope.columns：

@H_404_8@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中推送的列永远不会进入我的表.但是,如果我用一组示例数据的硬编码模拟替换我的异步调用,则会添加列,并且所有内容都按预期工作：

@H_404_8@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;
};

在我的控制器中,我的初始化代码调用

@H_404_8@getResults().then(function() {
  $scope.tableParams.reload();
});

$scope.tableParams = new ngTableParams({...

我的假设是,只要承诺得到解决,$scope.tableParams.reload();在$scope.columns更新之前调用.

最佳答案

基于文档中的demo,它很可能是以promises为例.
看来你必须在从promise获得响应后创建新的tableParams和cols对象.向现有cols添加行可能不会触发观察者.

@H_404_8@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);
    }
  };
});

@H_404_8@

javascript – 根据promise的结果将列添加到动态ng-table

猜你在找的JavaScript相关文章