Angular Modal popup Box

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.

READ :  Angularjs push object into array first index - angularjs unshift Examples

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]



Creating Angularjs Popup Using Bootstrap UI



Name Value Action
{{item.name}} {{item.value}}

Solution of AngularJs All Problems For infinityknow.com

My First Web-Application in angularjs, So I am very happy and 1000+ more then people are used of infinityknow.com



[/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

Leave a Reply

Your email address will not be published. Required fields are marked *