Как отобразить данные после отправки формы из модального в сетку в angularjs

Question

У меня есть форма, которая является модальной и сетка на странице.

При нажатии кнопки открывается модальное окно, после отправки формы данные должны отображаться в ui-grid.

Я пробовал немного кода в следующем плунжере

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

У вас было несколько проблем в вашем плунжере:

1. Вы на самом деле не загружали скрипт ui-grid или CSS в ваш html или инъекцию '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">

и в вашем модуле плункера: angular.module('plunker', ['ui.bootstrap', 'ui.grid'])...

2. Вы никогда не инициализировали system на $scope в вашем главном контроллере, так что я не уверен, что вы пытались разрешить в модальном контроллере.
3. $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());
});

Если ваша цель заключается в том, чтобы иметь возможность предоставить имя и электронное письмо и заполнить его сеткой пользовательского интерфейса, этот плункер, модифицированный по сравнению с вашим оригиналом, выполнит это. Надеюсь это поможет!