Question

这里的目标是将以下表单数据放在引导模式中，并根据表单元素（＃columns，rows，Title等）生成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-grid表的角度方法？

例如，如果我进入模态：

表名：＆＃34; foo表＆＃34;
专栏：4
行：3

我应该看到一个名为“foo Table＆＃39;有4列3行。

Answer 1

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

＆＃13;

<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>

＆＃13;

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

1 个答案: