angularjs - Not able to open modal box selecting value from the dropdown using ui-bootstrap-tpls.min.js and angular.min.js -
changing value dropdown trying open modal , supposed perform http request , body of filled response. unable open modal. 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 modal!!</h3> </div> <div class="modal-body"> <ul> //<div ng-if="test"> <p>the response {{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 {{response}} <span ng-bind="{{response}}"></span><i ng-hide="response" class="icon icon-refresh icon-spin">loading.........</i></p> </div> --> </div> </body> <script> //initializing app var app = angular.module('myapp',['ui.bootstrap']); //defining controller perform 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>
plunker demo
here straightforward version of you're trying do. have used service (which records using $http request) in resolve keep things nice , clean.
importantly, should note use of return in resolve objects. without these, there nothing signal resolve done , can allow modal.open it's thing! here's great tutorial on using resolve routes. resolve property in $modal service works identically 1 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'); }; });
Comments
Post a Comment