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]
| 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]
Edit {{item.name}}
[/php]