Angular Modal popup Box

Today, We want to share with you Angular Modal popup Box.
In this post we will show you Angular Modal popup Box, hear for Angular Modal popup Box we will give you demo and example for implement.
In this post, we will learn about Angular Modal popup Box with an example.

AngularJS Modal popup Box

AngularJS allows here data binding.Here, we are going to simple Modal-popup edit learn how to create popup modal using (js)AngularJS and UI Bootstrap Lib’s.It contains the ng-directive of the call bootstrap component by which popup modal.

Example of AngularJS Modal popup Box

[php]

[/php]

example.js : JavaScriptFile

[php]
angular.module(‘modalexamle’, [‘ui.bootstrap’]);

function ListCtrl($scope, $dialog) {

$scope.website_list = [
{name: ‘infinityknow.com’, value: ‘5(*****)’},
{name: ‘infinityknow.com’, value: ’10(**********)’},
{name: ‘w3free.blogspot.in’, value: ’15(star)’}
];

var dialogOptions = {
controller: ‘EditCtrl’,
templateUrl: ‘itemEdit.html’
};

$scope.edit_data = function(item){

var itemToEdit = item;

$dialog.dialog(angular.extend(dialogOptions, {resolve: {item: angular.copy(itemToEdit)}}))
.open()
.then(function(result) {
if(result) {
angular.copy(result, itemToEdit);
}
itemToEdit = undefined;
});
};
}
// the dialog modal popup is is injected in the specified model controller
function EditCtrl($scope, item, dialog){

$scope.item = item;

$scope.save_data = function() {
dialog.close($scope.item);
};

$scope.close_data = function(){
dialog.close(undefined);
};
}
[/php]

itemEdit.html : HTML File

[php]

[/php]

View Demo