0

Changing the value from the dropdown trying to open the modal and supposed to perform http request and body of will be filled with the response. But unable to open the modal. Any help will be really appreciated.

    <head>
        <title>Hello AngularJS</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>
    <link href="bootstrap.min.css" rel="stylesheet">
    </head>

    <body>
     <div ng-controller='NodeProvision'>   

<select ng-model="nodes" ng-change="nodeprovision(nodes)">
<option value="">please select</option>  
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

 <script type="text/ng-template" id="myModalContent.html">
                                <div class="modal-header">
                                <h3 class="modal-title">Welcome to modal!!</h3>
                                </div>
                                <div class="modal-body">
                                <ul>
                                //<div ng-if="test">
                            <p>The response is {{items}} <span ng-bind="{{items}}"></span><i ng-hide="items"  class="icon icon-refresh icon-spin">loading.........</i></p>     
                            //</div>
                                </ul>                                
                               </div>
                               <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-if="test">
            <p>The response is {{response}} <span ng-bind="{{response}}"></span><i ng-hide="response"  class="icon icon-refresh icon-spin">loading.........</i></p>     
        </div> -->
        </div>
    </body>

<script>
        //Initializing the app
        var app = angular.module('myApp',['ui.bootstrap']);

        //Defining the controller to perform the business logic
         app.controller('NodeProvision', ['$scope','$http','$modal', function($scope,$http,$modal) {  

            $scope.nodeprovision = function(node){

    $scope.animationsEnabled = true;

      $scope.open = function (size) {
        var modalInstance = $modal.open({
          animation: $scope.animationsEnabled,
          templateUrl: 'myModalContent.html',
          controller: 'ModalInstanceCtrl',
          size: size,
          resolve: {
            items: function () {
              $http.get('http://ac-00075763.devapollogrp.edu:8080/NodeProvision/provision/urn:apol:provider:acp/list?guid=5d4dc79e-f623-40f8-a14f-646c59c7b89a').
         success(function(data, status, headers, config) {
         $scope.items = data

         }).
         error(function(data, status, headers, config) {
           // log error
         });
            }
             }
            });  
             }; 
               }

         }]);



  app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {

  $scope.items = items;

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

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


    </script>
</html>
gourab das
  • 17
  • 6

1 Answers1

2

Plunker Demo

Here is a fairly straightforward version of what you're trying to do. I have used a service (which would normally get the records using an $http request) in the resolve to keep things nice and clean.

Importantly, you should note the use of the return in the resolve objects. Without these, there is nothing to signal to the resolve that everything is done and it can allow the modal.open to do it's thing! Here's a great tutorial on using resolve with routes. The resolve property in the $modal service works identically to the one in ngRoute.

app.controller('ModalDemoCtrl', function ($scope, $modal, Data) {

  $scope.animationsEnabled = true;

  $scope.open=function(){
    var modalInstance=$modal.open({
      animation: true,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      resolve: {
        loaddata: function(Data) {
                    return Data.get('allrecords');
                },
        selected: function () {
                    return $scope.model.id;
        }
      }
    });
  };

});

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, selected, loaddata) {

  $scope.allrecords = loaddata.records;
  $scope.selected = selected;

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});
Community
  • 1
  • 1
jme11
  • 17,134
  • 2
  • 38
  • 48
  • Thank you so much @Jme11...you are really great guy...you not only gave the answer, the way you described the flow...really appreciated...I will be looking forward to get more advice from you in coming days...cheers!!! – gourab das Jun 05 '15 at 09:57
  • You're so welcome. Just FYI, if an answer on SO helped you, it is customary to upvote, and if its provided an answer to your question, you can close the question by selecting it as the answer. – jme11 Jun 05 '15 at 14:33