如何在angularjs中显示模态窗口上的后期数据

时间:2016-01-15 09:18:38

标签: javascript angularjs

我需要在模态窗口中显示$ post数据。我可以通过我的POST服务获取数据并将结果数据传输到$scope.modalData。现在,我想显示这个modalData应该在模态窗口中显示它们的值。我尝试了很多方法来显示它但无法取得任何成功。请帮帮我。

toBeInitiated.jsp

    <!--     <div img src="resources/images/spinner.jpg" ng-show='loading'> -->
          <div class="col-md-1" > </div>      
          <div class="col-md-10">
            <!-- <input type="button" id="btnExport" value=" Export Table data into Excel " onclick="exportToExcel()" /> -->
            <!-- <button type="submit" class="btn btn-primary" id="btnExport" onclick="exportToExcel()">Export to Excel</button> -->
            <!-- <button class="btn btn-link" id="btnExport" > --> <!-- ng-click="exportToExcel('#toBeInitiatedData')"> -->
                <a href="downloadExcel"<span class="glyphicon glyphicon-share"></span> Export to Excel</a>
            <!-- </button> -->
            <div class="data" id="toBeInitiatedData" data-ng-controller="tobeinitiatedCtrl" data-ng-init="toBeInitiatedOnLoad()">
            <script type="text/ng-template" id="myModalContent.html">
            <div class="modal-header" data-ng-init="modalOnLoad()">
                <h3>Employee Details</h3>
            </div>
            <div class="modal-body">
                Employee Id {{modaldata.empEmail}}
            </div>
            <div class="modal-footer">
            <div class="btn btn-error">*If you click on Resend then this employee details will be deleted from the database.</div>
                <button class="btn btn-primary" ng-click="ok()">Resend</button>
                <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
            </div>
        </script>
              <table class="table table-hover table-condensed">
                <thead>
                  <tr>
                    <!-- <th>S.No.</th> -->
                    <!-- <th>Employee ID</th> -->
                    <th>
                      <a href="#" ng-click="sortType = 'EmpId'; sortReverse = !sortReverse" ng-model="initiatedFor">
                        Employee ID 
                        <span ng-show="sortType == 'EmpId' && !sortReverse" class="fa fa-caret-down"></span>
                        <span ng-show="sortType == 'EmpId' && sortReverse" class="fa fa-caret-up"></span>
                      </a>
                    </th>
                    <!-- <th>Employee Name</th> -->
                    <th>
                      <a href="#" ng-click="sortType = 'EmpName'; sortReverse = !sortReverse" ng-model="empName">
                        Employee Name 
                        <span ng-show="sortType == 'EmpName' && !sortReverse" class="fa fa-caret-down"></span>
                        <span ng-show="sortType == 'EmpName' && sortReverse" class="fa fa-caret-up"></span>
                      </a>              
                    </th>
                    <!-- <th>Requested By</th> -->
                    <th>
                      <a href="#" ng-click="sortType = 'ReqBy'; sortReverse = !sortReverse" ng-model="initiatedBy">
                        Requested By 
                        <span ng-show="sortType == 'ReqBy' && !sortReverse" class="fa fa-caret-down"></span>
                        <span ng-show="sortType == 'ReqBy' && sortReverse" class="fa fa-caret-up"></span>
                      </a>              
                    </th>
                    <th>
                      <a href="#" ng-click="sortType = 'ReqDateParsed'; sortReverse = !sortReverse" ng-model="requestedDate">
                        Requested Date
                        <span ng-show="sortType == 'ReqDateParsed' && !sortReverse" class="fa fa-caret-down"></span>
                        <span ng-show="sortType == 'ReqDateParsed' && sortReverse" class="fa fa-caret-up"></span>
                      </a>              
                    </th>
                    <th>Review Data</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  <tr dir-paginate="x in names | orderBy:sortType:sortReverse | filter:query | itemsPerPage:10">
                    <!-- <td>{{x.SNo}}</td> -->
                    <td>{{x.initiatedFor}}</td>
                    <td>{{x.empName}}</td>
                    <td>{{x.initiatedBy}}</td>
                    <td>{{x.requestedDate | date: 'dd-MMM-yyyy'}}</td>
                    <td><button type="button" class="btn btn-link" ng-click="open(x)">View {{x.initiatedFor}}</button></td>
                    <td>                
                      <select name="action" class="selectContainer actionSelect form-control" ng-model= "action"title="Select 1 action" width="50px">
                        <option value="resend">Resend</option>
                        <option value="initiate">Initiate</option>
                      </select>
                    </td>
                    <td><input type="checkbox" ng-model="confirmed" ng-click="toggleSelection(x,confirmed,initiate,initiatedFor)" value="{{x}}" /></td>
                  </tr>
                </tbody>        
              </table>

              <dir-pagination-controls max-size="10" direction-links="true" boundary-links="true"></dir-pagination-controls>    
            <button class="btn btn-primary pull-right" ng-click="resendIntitate()">Resend/Initiate</button>
            </div>

            <div>
                <!-- <button class="btn btn-primary pull-right" ng-click="resendIntitate()">Resend/Initiate</button> -->
            </div>      
          </div>      
          <div class="col-md-1"> </div>
         <!--  </div> -->

app.js

  $scope.open = function open (size) {
                //alert(x);
                $scope.modal=[];
                $scope.modaldata=[];
                $scope.modal = size;

                $http({
                    url: 'fromModal',
                    method: "POST",
                    data:JSON.stringify($scope.modal),
                    headers: {'Content-Type': 'application/json'}
                }).success(function (data, status, headers, config) {
                    console.log("success");
                    $scope.modaldata=data;
                    //$scope.loading = false;
                    //$scope.initiate = angular.copy(data);
                    //$scope.initiate.push(data);
                    //$scope.names=data;
                    //$scope.initiate = angular.copy($scope.names);
                }).error(function (data, status, headers, config) {
                    console.log("failed");
                });

                 var modalInstance = $modal.open({
                      templateUrl: 'myModalContent.html',
                      controller: 'ModalInstanceCtrl',
                      size:$scope.modaldata,
                      resolve:{
                          names:function(){
                            return $scope.modaldata;  
                          },
                          x:function(){
                              return size;
                          }
                      }
                    });


            };          
        }]);;

        app.controller('ModalInstanceCtrl', function ($scope,$http, $modalInstance, names,x) {  

            /*$scope.x = x;
            $scope.names = names;*/
            /*$scope.selected = {
                    name: $scope.names[0]
                  };*/

              $scope.ok = function () {
                $modalInstance.close("ok");
              };

              $scope.cancel = function () {
                $modalInstance.dismiss("cancel");
              };
            });

1 个答案:

答案 0 :(得分:0)

问题是模态打开并尝试在加载之前阅读$scope.modelData,你可以将$http调用放在模态的resolve中,这样模态等待$http来电完成后再打开。