如何从表单生成UI网格表？

Question

这里的目标是基于表单元素（＃列，行，标题等），以采用以下形式数据坐在自举模式内，并生成UI格表：

控制器

angular.module('myApp') 
    .controller("modalToTable", function ($scope, $uibModal, $log) { 

    $scope.items = ['item1', 'item2', 'item3']; 

    //open a modal window to create a data table 
    this.openModal = function (size, parentSelector) { 
     var parentElem = parentSelector ? angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined; 
     var modalInstance = $uibModal.open({ 
      animation: $scope.animationsEnabled, 
      ariaLabelledBy: 'modal-title', 
      ariaDescribedBy: 'modal-body', 
      backdrop: 'static', 
      templateUrl: 'modalToTable.html', 
      controller: 'createDataTableCtrl', 
      windowClass: 'modal-scale', 
      //size: size, 
      appendTo: parentElem, 
      resolve: { 
       items: function() { 
        return $scope.items; 
       } 
     } 
    }); 

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

    }; 
}) 

.controller('createDataTableCtrl', function ($scope, $uibModalInstance, items) { 

    $scope.items = items; 
    $scope.selected = { 
    item: $scope.items[0] 
    }; 

    $scope.ok = function() { 
    $uibModalInstance.close($ctrl.selected.item); 
    }; 

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

}); 

myTable.html（目前只是有打开的模式按钮，这就是这个表应该生成）

<button type="button" class="btn btn-primary" ng-click="openModal()">Add Data Table</button> 

modalToTable.html（模态）

<div class="modal-header"> 
    <button type="button" class="close" ng-click= "closeModal()">&times;</button> 
    <h3 class="modal-title" id="modal-title"><strong>Create Data Table</strong></h3> 
</div> 

<div class="modal-body"> 
    <form action="" method="post" name="registration" class="register"> 
     <fieldset> 
      <div class="form-group"> 
       <label for="Student">Table Name:</label> 
       <input id="table-name-input" name="table-name"/> 
      </div> 
      <div class="form-group"> 
       <label for="Columns">Columns:</label> 
       <input type="text" class="column-row-tableConfig" value="0" /> 
      </div> 
      <div class="form-group" style="padding-bottom: 10px"> 
       <label for="Rows">Rows:</label> 
       <input type="text" class="column-row-tableConfig" value="0" /> 
      </div> 
     </fieldset> 
    </form> 
</div> 
<div class="modal-footer"> 
    <button type="button" class="btn btn-primary">Create</button> 
    <button type="button" class="btn btn-primary" ng-click="closeModal()">Cancel</button> 
</div> 

//this would be where I'd like to capture the data from the Modal form 

问题 是否有一个角度的方法来生成基于来自在模态形式的数据的UI网格表？

例如，如果我进入模式：

• 表名： “富表”
• 列：4
• 行：3

我应该去看UI -grid表，标题为'foo Table'，有4列和3行。

Answer 1

I just create a code sample. replace it with your code you will get you want 

<div class="modal-header"> 
 
    <button type="button" class="close" ng-click= "closeModal()">&times;</button> 
 
    <h3 class="modal-title" id="modal-title"><strong>Create Data Table</strong></h3> 
 
</div> 
 

 
<div class="modal-body"> 
 
    <form action="" method="post" name="registration" class="register"> 
 
     <fieldset> 
 
      <div class="form-group row"> 
 
       <div class="col-md-4"> 
 
       <label for="Student">Table Name:</label> 
 
       </div> 
 
       <div class="col-md-8"> 
 
       <input id="table-name-input" name="table-name"/> 
 
       </div> 
 
      </div> 
 
      <div class="form-group ror"> 
 
      <div class="col-md-4"> 
 
       <label for="Columns">Columns:</label> 
 
       </div> 
 
       <div class="col-md-8"> 
 
       <input type="text" class="column-row-tableConfig" value="0" /> 
 
       </div> 
 
      </div> 
 
      <div class="form-group row"> 
 
      <div class="col-md-4"> 
 
       <label for="Rows">Rows:</label> 
 
       </div> 
 
       <div class="col-md-8"> 
 
       <input type="text" class="column-row-tableConfig" value="0" /> 
 
       </div> 
 
      </div> 
 
     </fieldset> 
 
    </form> 
 
</div> 
 
<div class="modal-footer"> 
 
    <button type="button" class="btn btn-primary pull-right">Create</button> 
 
    <button type="button" class="btn btn-primary pull-right" ng-click="closeModal()">Cancel</button> 
 
</div>