Comment puis-je générer une table de grille d'interface utilisateur à partir d'un formulaire?

Question

L'objectif est ici de prendre les données de formulaire ci-dessous assis dans un modal d'amorçage, et générer une table grille de l'interface utilisateur sur la base des éléments de forme (# colonnes, lignes, titre, etc.):

Controller

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 (actuellement ont juste un bouton qui ouvre le modal, c'est là la table devrait générer)

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

modalToTable.html (modal)

<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 

La question Y at-il une approche angulaire pour générer une table de grille de l'interface utilisateur sur la base des données de la forme dans le modal?

Par exemple, si je rentre dans le modal:

• Nom de la table: "foo Table"
• colonne: 4
• ligne: 3

je devrais voir un ui -grille table intitulée 'Table foo' avec 4 colonnes et 3 rangées.

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>