从 modal 获取数据并将其显示在父控制器表中答案

【问题标题】：get data from modal and display it in a parent controller table从 modal 获取数据并将其显示在父控制器表中
【发布时间】：2016-11-17 20:21:44
【问题描述】：

我想知道我们如何从 modal 传递数据并将它们显示在主控制器表中。在模式中单击生成按钮时，我正在获取输入文本数据并将其显示在表格中。但是表没有用数据更新。这是我的 plunkr-https://plnkr.co/edit/yk4Zcl6LF79cw4msYUrw?p=preview

    // Code goes here




var myTable = angular.module('myTable', ['ui.bootstrap']);


    myTable.controller('tableCtrl', function($scope, $http, $uibModal) {


        $scope.Catalogs = [];   
        $scope.phNumber = [];
        $scope.schema=[{"value":"2.0"},{"value":"2.2"}];
        $scope.revision=[{"value":"ARev"},{"value":"XRev"}];

        $http({ method:'GET',
            url: 'http://100.96.16.175:8080/CGSDataManager/webapi/component_type',
            headers: {'Accept': 'application/json'}
          }).
            success(
            function (data) {
                $scope.components = data;

                /*for(var i = 0; i< data.length; i++) {
                    $scope.components = data[i].description;
                    //alert(data[i].description + components);
                }*/
            }
          );

        // rest call to get System Models
        $http({ method:'GET',
            url: 'http://100.96.16.175:8080/CGSDataManager/webapi/platform_info',
            headers: {'Accept': 'application/json'}
          }).
            success(
            function (data) {
              $scope.systems = data
                for(var i = 0; i< data.length; i++) {
                    phNumber = data[i].platform_id;

                }
            }
          );

       $scope.change = function() {

          $scope.opts = {
          backdrop: true,
          backdropClick: true,
          templateUrl : 'modalView1.html',
          controller : 'ModalInstanceCtrl',
          resolve: {} // empty storage
            };


          $scope.opts.resolve.item = function() {
              return angular.copy({schema:$scope.schema, revision:$scope.revision, components:$scope.components, systems:$scope.systems, phNumber:$scope.phNumber, Catalogs:$scope.Catalogs}); // pass name to Dialog
          }

            var modalInstance = $uibModal.open($scope.opts);

            modalInstance.result.then(function(){
              //on ok button press 
            },function(){
              //on cancel button press
              console.log("Modal Closed");
            });
        };  

    });
    myTable.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, item) {


          $scope.item = item;


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

        $scope.submitData = function() {


            $scope.item.Catalogs.push({name: $scope.catalogName,validation: "true", publishing: "hello"});



            $uibModalInstance.dismiss('submit');
        };



    }); 


// modal code
<div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" data-ng-click="cancel()">&times;</button>
      <h4 style="color: #0085C3;" ><b style="font-size:14px;">Filter</b></h4>
    </div>
    <div class="modal-body" name="modalData">

    <div class="row">
    <div class="col-md-12 ">
    <form>
    Catalog Name: <input type="text" data-ng-model="catalogName"/>
    </form>
    </div>
    </div>

    <div class="row" >
            <div class="col-md-3 dell-bannercolor line">
                <span style="font-size: 12px">Schema</span>

                <table class="table table-striped">
                    <tbody>
                        <tr data-ng-repeat="sc in item.schema">
                            <td style="padding-top: 2px; padding-bottom: 4px;"><input type="checkbox" data-ng-model="sc.selected" data-ng-true-value="'{{sc.value}}'" data-ng-false-value="''">&nbsp;&nbsp;<span style="font-size: 10px; color: #000000; padding-top: 2px; padding-bottom: 4px;">{{sc.value}}</span></td>

                        </tr>


                    </tbody>

                </table>

            </div>

            <div class="col-md-3 dell-bannercolor line">
                <span style="font-size: 12px">Revision</span>

                <table class="table table-striped">
                    <tbody>
                        <tr data-ng-repeat="re in item.revision">
                            <td style="padding-top: 2px; padding-bottom: 4px;"><input type="checkbox" data-ng-model="re.selected" data-ng-true-value="'{{re.value}}'" data-ng-false-value="''">&nbsp;&nbsp;<span style="font-size: 10px; color: #000000; padding-top: 2px; padding-bottom: 4px;">{{re.value}}</span></td>

                        </tr>


                    </tbody>

                </table>

            </div>


            <div class="col-md-3 dell-bannercolor line">
                <span style="font-size:12px">Component Type</span>

                <div style="height:180px; overflow:auto;">
                <table class = "table table-striped" >
                <tbody>
                <tr data-ng-repeat="x in item.components">
                <td style=" padding-top:2px; padding-bottom:4px;"><input type="checkbox" data-ng-model="x.selected" data-ng-true-value="'{{x.description}}'" data-ng-false-value="''">&nbsp;&nbsp;<span style="font-size:10px; color:#000000; padding-top:2px; padding-bottom:4px;">{{x.description}}</span></td>
                </tr>

                </tbody>

                </table>
                </div>
            </div>

            <div class="col-lg-3 dell-bannercolor">
                <span style="font-size:12px">System Model</span>
                <br/>

                <div style="height:150px; overflow:auto;">
                <table class = "table table-striped" >
                <tbody>
                <tr data-ng-repeat = "y in item.systems">
                <td style=" padding-top:2px; padding-bottom:4px;"><input type="checkbox" data-ng-model="y.selected" data-ng-true-value="'{{y.platform_id}}'" data-ng-false-value="''">&nbsp;&nbsp;<span style="font-size:10px; color:#000000; padding-top:2px; padding-bottom:4px;">{{y.model}}</span></td>
                </tr>

                </tbody>

                </table>
                </div>
            </div>

        </div>

    </div>

    <div class="modal-footer">
      <button type="button" class="btn btn-danger" data-dismiss="modal" data-ng-click="cancel()">Cancel</button>
      <button type="button" class="btn btn-success" data-dismiss="modal" data-ng-click="submitData()">Generate</button>
    </div>  


// html code
<!DOCTYPE html>
    <html>

    <head>
      <script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
      <script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <script data-require="ui-bootstrap@*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
      <script src="script.js"></script>
      <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
      <link rel="stylesheet" href="style.css" />

      <style>
      .dell-bannercolor {
        color: #0085C3;
    }

    //
    adding this code for vertical line -- start
    .line {
        position: relative;
    }

    .line:after {
        content: '';
        position: absolute;
        right: 0;
        border-right: 1px solid #cfc7c0;
        top: 10%;
        bottom: 10%;
    }
    //
    end
      </style>
    </head>

    <body ng-app="myTable" ng-controller="tableCtrl">
      <div class="containter">
        <div class="jumbotron">
          <h1>JSON to Table</h1>
        </div>
        <div >
          <div id="table1Div" style="background:white;position absolute;">
            <table class="table table-hover table-bordered" id="peopleTable">
              <tbody>
                <tr>
                  <th>Catalog Name</th>
                  <th>Validation</th>
                  <th>publishing</th>

                </tr>

                <tr data-ng-repeat="catalog in Catalogs">
                <td>{{catalog.name}}</td>
                <td>{{catalog.validation}}</td>
                <td>{{catalog.publishing}}</td>
                </tr>
              </tbody>
            </table>

            <a href="#"><button type="button" class="btn btn-primary" ng-click="change()">Clone</button></a>
          </div>

        </div>
      </div>
    </body>

    </html>

【问题讨论】：

我自己的工作不正常，我将如何帮助您。如果您有任何解决方案，也请联系我。

标签： javascript angularjs

【解决方案1】：

看到这个https://plnkr.co/edit/hxdkNBvccYDie1tiigZy?p=preview

你需要在关闭模态时传递它并进入控制器

  $uibModalInstance.dismiss($scope.item.Catalogs);

【讨论】：

使用 $uibModalInstance.dismiss($scope.item.Catalogs);只能将一个范围项传递给父控制器。如果我想将多个模态范围项传递给父控制器该怎么办？
@shaaa 您可以将 1 个对象作为参数传递，因此我建议您制作多个模型的单个对象 {m1:{},m2:{}} 并将此对象作为参数传递希望有所帮助。

【解决方案2】：

你可以使用 $rootScope

myTable.controller('tableCtrl', function($scope, $rootScope,$http, $uibModal) {
    $rootScope.Catalogs = [];   
})

在另一个控制器中只推入目录而不是 item.catalogs

myTable.controller('ModalInstanceCtrl', function ($scope,$rootScope, $uibModalInstance, item) {
$scope.submitData = function() {


        $rootScope.Catalogs.push({name: $scope.catalogName,validation: "true", publishing: "hello"});

}
});

【讨论】：