Question

我有一个模态的形式和页面中的网格。

单击按钮时，模态打开，提交表单后，数据必须以ui-grid显示。

我在下面的plunker中尝试了很少的代码

http://plnkr.co/edit/GWR0yoACZfCSDhH55PLJ?p=preview

这是我试过的代码

 var ModalDemoCtrl = function ($scope, $modal, $log) {
  var columnDefs = [
                    { name: 'customname', displayName: 'Customer Name' },
                    { name: 'email', displayName: 'Email' }
    ];
    $scope.gridOptions = {
        paginationPageSizes: [10, 15, 20],
        paginationPageSize: 10,
        enableColumnMenus: false,
        enableRowSelection: true,
        enableFullRowSelection: true,
        multiSelect: false,
        columnDefs: columnDefs,
        data: $scope.system
    };

 $scope.open = function () {

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: ModalInstanceCtrl,
  resolve: {
    system: function () {
      return $scope.system;
    }
  }
  });

modalInstance.result.then(function (systems) {
   $scope.gridOptions.data = systems;
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});
};
};

 var ModalInstanceCtrl = function ($scope, $modalInstance, system) {

 $scope.system = system;

 $scope.submit = function () {
  $modalInstance.close($scope.system);

 };

 $scope.cancel = function () {
   $modalInstance.dismiss('cancel');
 };

};

Answer 1

你的掠夺者遇到了一些问题：

您实际上并未在html中加载ui-grid脚本或CSS或将'ui.grid'注入模块中。

<script src="http://ui-grid.info/release/ui-grid.js"></script>

<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">

并在您的plunker模块中： angular.module('plunker', ['ui.bootstrap', 'ui.grid'])...

您从未在主控制器的system上初始化$scope，因此我不确定您在模态控制器中尝试解决的问题。
$scope.gridOptions.data对象是一个数组，因此在关闭模态时，您需要将system数据推入其中，而不是将其设置为system。

即：

modalInstance.result.then(function (system) {
  console.log(system);
  $scope.gridOptions.data.push(system);
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});

如果你的目标是能够提交一个名称和一封电子邮件，并让它填充一个ui-grid，this plunker，从你的原始版本修改，就可以完成。希望这有帮助！

在angularjs

1 个答案: