无法将数据从弹出模态传递到父页面

时间：2019-07-03 06:26:28

标签： javascript html angularjs

我已经在angularjs中创建了一个弹出模式。在弹出窗口中，有一些输入字段，这些字段应由输入值组成表格。 有两个HTML页面。 HTML的第一个页面是父页面，其中包含一个重定向到弹出页面的按钮 第二个html页面是包含一个文本字段的弹出窗口 在该文本字段中输入值应形成具有两个输入字段的行 从形成的输入字段中输入并单击确定。 弹出窗口应关闭，并在父页面中形成表格。 以下是获取详细想法的plnkr。

https://next.plnkr.co/edit/z2E9sE 

var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('ModalCtrl', function($scope, $uibModal) {
  $scope.open = function() {
    var modalInstance = $uibModal.open({
      templateUrl: 'modalContent.html',
      controller: function($scope, $uibModalInstance) {
        debugger;
        $scope.table = 0;
   $scope.cols = [];
   $scope.rows = [];

   $scope.makeArray = function() {
      if ($scope.table) {
        return new Array(parseInt($scope.table));
      } else {
        return new Array(0);
      }
   }

   $scope.gen=function($index)
   {
     $scope.getColsCount($index);
     $scope.getRowsCount($index);
    
   };
     $scope.getRowsCount = function ($index) {
      if ($scope.rows[$index]) {
         return new Array(parseInt($scope.rows[$index]));
      } else {
         return new Array(0);
      }
   }

   $scope.getColsCount = function ($index) {
      if ($scope.cols[$index]) {
        return new Array(parseInt($scope.cols[$index]));
      } else {
        return new Array(0);
      }
    }
        $scope.ok = function() {
          debugger;
          $uibModalInstance.close($scope.gen());
        };
        $scope.cancel = function() {
          $uibModalInstance.dismiss();
        };
      },
    });
    modalInstance.result.then(function(response) {
      $scope.result = `${response} `;
    });
  };
});

<!-- begin snippet: js hide: false console: true babel: false -->
<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link data-require="bootstrap-css@3.*" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
    <script data-require="angular.js@1.6.5" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script data-require="angular-animate@1.6.*" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.min.js"></script>
    <script data-require="angular-touch@1.6.*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-touch.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="2.5.0" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="app.js"></script>
  </head>


  <body ng-app="plunker">
    <div ng-controller="ModalCtrl">
      <button class="btn btn-info" ng-click="open()" style="margin: 15px;">Create Shelf</button>
      
      
       <table ng-repeat="t in makeArray() track by $index">
        <tr ng-repeat="r in getRowsCount($index) track by $index">
          <td ng-repeat="c in getColsCount($parent.$index) track by $index">Col </td>
        </tr>
      </table>
    </div>
  </body>

</html>

<h3> POP UP</h3>
<input ng-model="table" type="number" />
    <table>
      <tr ng-repeat="t in makeArray() track by $index">
        <td> <input ng-model="rows[$index]" type="number" />
        </td>
        <td> <input ng-model="cols[$index]" type="number" /></td>
      </tr>
    </table>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

2 个答案:

答案 0 :(得分：0)

这里发生了几件事。 首先：您不会在gen函数中返回任何内容，也不会在调用它时传递索引。 其次：请注意，模态正在创建一个单独的作用域，您的makeArray函数在模态的作用域中声明。 这是更新后的plnkr ，应该可以向正确的方向发展。

答案 1 :(得分：0)

我找到了上述问题的解决方案。 该代码发布在下面。 这是Plunker链接。 http://next.plnkr.co/edit/z2E9sE 

var app = angular.module('plunker', ['ui.bootstrap']);
app.config(['$qProvider', function ($qProvider) {
    $qProvider.errorOnUnhandledRejections(false);
}]);
app.controller('ModalCtrl', function ($rootScope, $scope, $uibModal) {
    $rootScope.tableArray = [];
    $rootScope.getRowsCountData = [];
    $rootScope.getColsCountData = [];
    $scope.open = function () {
        var modalInstance = $uibModal.open({
            templateUrl: 'modalContent.html',
            controller: function ($scope, $uibModalInstance) {
                $scope.tableCount = 0;
                $scope.tables = [];
                $scope.cols = [];
                $scope.rows = [];
                $rootScope.tableArray = [];
                $rootScope.getRowsCountData = [];
                $rootScope.getColsCountData = [];
                $scope.makeArray = function () {
                    if ($scope.tableCount) {
                        for (let i = 0; i < $scope.tableCount; i++)
                        {
                            let obj = { rows: 0, cols: 0 };
                            $scope.tables.push(obj);
                        }
                    }
                }
                $scope.ok = function () {
                     $rootScope.tableArray = $scope.tables;
                    
                    $uibModalInstance.close();
                };
                $scope.cancel = function () {
                    $uibModalInstance.dismiss();
                };
            },
        });
    };
});
app.filter('range', function () {
    return function (input, total) {
        total = parseInt(total);

        for (var i = 0; i < total; i++) {
            input.push(i);
        }

        return input;
    };
});
<!DOCTYPE html>
<html>

<head>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link data-require="bootstrap-css@3.*" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
    <script data-require="angular.js@1.6.5" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script data-require="angular-animate@1.6.*" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.min.js"></script>
    <script data-require="angular-touch@1.6.*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-touch.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="2.5.0" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="app.js"></script>
</head>


<body ng-app="plunker">
    <script id="modalContent.html" type="text/ng-template">
        <h3> POP UP</h3>
        <input ng-model="tableCount" type="number" ng-change="makeArray()" />
    
        <table>
            <tr ng-repeat="t in tables track by $index">
                <td>
                    <input ng-model="t.rows" type="number" />
                </td>
                <td> <input ng-model="t.cols" type="number" /></td>
            </tr>
        </table>
           <!-- <table ng-repeat="t in makeArray() track by $index">
          <tr ng-repeat="r in getRowsCount($index) track by $index">
            <td ng-repeat="c in getColsCount($parent.$index) track by $index">Col </td>
          </tr>
        </table> -->
        <pre>{{tableArray}}</pre>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>
    <div ng-controller="ModalCtrl">
        <button class="btn btn-info" ng-click="open()" style="margin: 15px;">Create Shelf</button>

      <pre>{{tableArray}}</pre>
        <table ng-repeat="t in tableArray track by $index" border="2">
            <tr ng-repeat="r in [] | range:t.rows">
                <td ng-repeat="c in [] | range:t.cols">RC</td>
            </tr>
        </table>
    </div>
</body>

</html>

相关问题
最新问题