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
Related
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
});
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
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;
},
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);
});
});
I'm using Angular-ui modal instance and i'm trying to get the return value but for some reason the bindings is not working correctly
var openNewAlbum = function() {
var modal = $modal.open({
templateUrl :'/app/modals/NewAlbumModal.html',
controller : function($scope, $modalInstance) {
$scope.albumTitle;
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
$scope.accept = function() {
$modalInstance.close($scope.albumTitle);
}
},
keyboard: false,
backdrop: 'static'
});
return modal;
}
this is in the controller:
$scope.newAlbum = function() {
var modalInstance = ModalService.openNewAlbum();
modalInstance.result.then(function(response) {
console.log(response);
});
}
the var response that gets logged is Whatever I assign to it inside the Modal's Controller and not what gets passed in the in Input
here is the modal template:
<div style="padding:6px">
<div class="modal-body" style="font-weigth:bold;font-size:18px">
<label for="">Nombre del Album</label>
<input class="form-control" type="text" ng-model="albumTitle">
{{albumTitle}}
<br>
</div>
<button class="btn btn-danger" ng-click="cancel()" >Cancelar</button>
<button class="btn btn-primary pull-right" ng-click="accept()">Aceptar</button>
</div>
when checking {{albumTitle}} I cant see that it changes, but when I click Accept, the return value is ' ' ....... (the value that was assign to $scope.albumTitle = '';)