Open angular ui modal on ajax loaded select - angularjs

I'm loading the dropdown with jsonp, the dropdown is populated from the url, but when I select an option 1, it should open a dialog with some rules in it. I'm trying to make this work, but no luck.
I was following the ui-bootstrap modal code and this from stackoverflow
<div class="table-cell" ng-app="ui.bootstrap.demo" ng-controller="ModalDemoCtrl">
<select id="method" ng-change="open();" ng-model="selected">
<option>
--select--
</option>
<option ng-repeat="item in items" value={{item.id}}>{{item.value}} </option>
</select>
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Results <small>Total Records: <strong>{{allrecords.length}}</strong></small></h3>
</div>
<div class="modal-body">
<p>Your selection: {{selected}}</p>
<p>Displaying records: {{startval}} - {{endval}}</p>
<ol start="{{startval}}">
<li ng-repeat="record in allrecords.slice(startval-1, endval)">{{record.Name}}</li>
<ol>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
Angular
// Code goes here
var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']),
dropDown = angular.module('ui.bootstrap.demo', []);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($scope, $uibModal, $log) {
console.log($scope);
$scope.animationsEnabled = true;
$scope.open = function(size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function() {
return $scope.items;
}
}
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function() {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function($scope, $uibModalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function() {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
});
dropDown.controller('ModalDemoCtrl', function($scope, $http) {
$http({
method: 'JSONP',
url: 'URL?callback=JSON_CALLBACK',
withCredentials: true
}).then(function successCallback(response) {
console.log(response.data);
return response.data;
}, function errorCallback(response) {
console.log(response);
});
});

Related

print custom function response in modal popup angularjs

How to print my response in my modal popup.
I have a different function for open Modal & my custom function
I want to print my custom function response in modal popup
$scope.createUser = function() {
var modalInstance = $modal.open({
templateUrl: '/js/modal-popup.html',
controller: function ($scope, $modalInstance, $log) {
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
});
}
$scope.allTest = function() {
$http({
method: 'GET',
url: 'api/url'
}).success( function (data) {
$scope.data = data.data;
}).error(function (response){
console.log("error");
});
}
<button type="button" name="createUser" class="btn btn-primary pull-right" ng-click="createUser(); allTest()">Create User </button>
<div class="modal-header">
<h3 class="modal-title"><span class="glyphicon glyphicon-user"></span> Create User</h3>
</div>
<div class="modal-body">
{{data}}
</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>
Seems like you are using angularStrap for you modal, in this case you can use the resolve property
var modalInstance = $modal.open({
templateUrl: '/js/modal-popup.html',
controller: function ($scope, $modalInstance, $log) {
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {yourresult: $http({
method: 'GET',
url: 'api/url'
})}
});
Note: the modal only opens if the promise resolves
http://mgcrea.github.io/angular-strap/#/modals

UI Bootstrap Modal don't close. AngularJS

I was looking for this question on forum and the solution dosn't worked for me, so...
The only way to close the modal is clicking outside of modal, or press ESC on keyboard..
Here is my modal controller:
app.controller('ModalCtrl', function($scope, $uibModal) {
$scope.items = [{}]
$scope.showModal = function(selectedItem) {
var uibModalInstance = $uibModal.open({
windowTopClass: 'modal fade ql-modal',
templateUrl : 'modalContent.html',
controller : function($scope, $uibModalInstance, $uibModal, item){
$scope.item = item;
},
resolve: {
item: function(){
return selectedItem;
}
} // empty storage
});
uibModalInstance.result.then(function(selectedItem){
$scope.selected = selectedItem;
$scope.cancel = function(){
$uibModalInstance.dismiss('cancel');
};
});
};
});
And here is my modal on HTML:
<script type="text/ng-template" id="modalContent.html">
<!-- Modal -->
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="MyModal" aria-label="Close" ng-click="cancel()">
<span aria-hidden="true">×</span>
</button>
...................................
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="cancel()">Close</button>
</div>
</div>
<!--/.Content-->
<!--/Modal-->
</script>
I followed every answer, fiddle, plnkr, but i cannot make it work.
Just move a cancel() method from uibModalInstance.result.then to
your modal controller:
var uibModalInstance = $uibModal.open({
windowTopClass: 'modal fade ql-modal',
templateUrl : 'modalContent.html',
controller : function($scope, $uibModalInstance, $uibModal, item){
$scope.item = item;
$scope.cancel = function(){
$uibModalInstance.dismiss('cancel');
};
},
resolve: {
item: function(){
return selectedItem;
}
} // empty storage
});

Having select tag in ui-bootstrap model doesn't display footer buttons

If I use a select tag (dropdown) in my ui-bootstrap modal body then it doesn't show modal-footer buttons. It's working fine if I use input element instead of select tag.
I have tried all the things and couldn't resolve this. May be there is something which is missing.
var app = angular.module('myApp', ['ngAnimate','ui.bootstrap']);
app.controller('shell', function($scope, $interval, $uibModal) {
$scope.test = 'hello world';
this.counter = 0;
var vm = this;
this.moveHandler = function() {
console.log('mouse moved, reset counter!');
vm.counter = 0;
};
var timer = function(iterCount) {
console.log('timer tick', vm.counter);
vm.counter++;
};
var intervalPromise = $interval(timer, 100);
$scope.$on("$destroy", function handler() {
// destruction code here
$interval.cancel(intervalPromise); // stop interval on destroy of ctrl.
});
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
};
});
// modal code from angular-ui-bootstrap demo
app.controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
html, body {
width: 100%;
height: 100%;
}
/*
.modal {
display: block;
}*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.0/ui-bootstrap-tpls.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<!-- <input type="text" class="form-control"/> -->
<select class="form-control"/>
</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>
<button class="btn btn-default" ng-click="open()">Open me!</button>
<button class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button class="btn btn-default" ng-click="open('sm')">Small modal</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
{{test}}
</div>
enter image description here
Hi u have to close the select tag instead inline closing you have to close like that
Wrong
<select class="form-control"/>
Right
select class="form-control" ></select>
for reference https://plnkr.co/edit/E8Ztel80jhKCaZYIqpex
and checknow your Modal footer Appears

ui-bootstrap how to get the scope in view aliased

View calling modal
I have this code you should: open a modal bringing the data within the controller being used by the angular-ui-bootstrap. But it is not getting the result of the "item" that is selected.
in my controller:
function EntidadesCtrlFn(EntidadeService, $uibModal, $log) {
var vm = this;
vm.animationsEnabled = true;
vm.modalEdit = function(size, selectedEntidade) {
var modalInstance = $uibModal.open({
animation: vm.animationsEnabled,
templateUrl: './app/modulos/entidades/views/edit-entidades.html',
controller: function($scope, $uibModalInstance, entidade) {
vm.entidade = entidade;
},
controllerAs: 'vm',
bindToController: true,
size: size,
resolve: {
entidade: function() {
return selectedEntidade;
}
}
});
modalInstance.result.then(function(selectedItem) {
vm.selected = selectedItem;
}, function() {
console.log('Modal dismissed.result.');
$log.info('Modal dismissed at: ' + new Date());
});
};
in view of list:
<div class="row" ng-controller="EntidadesCtrl as vm">
...
<button class="btn btn-default" ng-click="vm.modalEdit('lg', entidade)" type="button">
Editar
</button>
...
This modal opens, but does not bring the contents of:
controller: function($scope, $uibModalInstance, entidade) {
vm.entidade = entidade;
},
TemplateUrl:
<section ng-controller="EntidadesCtrl as vm">
{{vm}}
<div class="modal-header">
<h3 class="modal-title">Editando entidade</h3>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()" type="button">OK</button>
<button class="btn btn-warning" ng-click="cancel()" type="button">Cancel</button>
</div>
</section>
Solved.
I ended up forgetting to pass "this" in the controller ;
Sorry about that.
In the controller modal:
controller: function($uibModalInstance, entidade) {
var vm = this;
vm.entidade = entidade;
},

Not able to open modal box selecting value from the dropdown using ui-bootstrap-tpls.min.js and angular.min.js

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>
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');
};
});

Resources