Edit User Details in Dialog
How do I make an edit user details in dialog?
Demo to show how to pass object data from a calling controller in AngularJS to the Dialog Service for editting in a modal window.. What is a edit user details in dialog? How do you make a edit user details in dialog? This script and codes were developed by Michael E Conroy on 03 July 2022, Sunday.
Edit User Details in Dialog - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Edit User Details in Dialog</title> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://rawgithub.com/m-e-conroy/angular-dialog-service/v4.2.0/dialogs.min.css'>
</head>
<body> <div class='container' ng-app='modalTest' ng-controller='dialogServiceTest'> <div class='row'> <div class='col-md-12'> <h1>Edit User Details in Dialog</h1> <p>Demo to show how to pass an object to a custom dialog in order to edit the information.</p> </div> </div> <div class='row'> <div class='col-md-12'> <table class='table table-striped'> <tr> <th>UID</th> <th>Name</th> <th>Occupation</th> <th>Address</th> <th> </th> </tr> <tr ng-repeat='user in users'> <td>{{user.uid}}</td> <td>{{user.name}}</td> <td>{{user.occupation}}</td> <td>{{user.address}}</td> <td> <button class='btn btn-default' ng-click='editUser(user)'> Edit {{user.name}} </button> </td> </tr> </table> </div> </div>
</div> <script src='http://code.angularjs.org/1.2.16/angular.min.js'></script>
<script src='http://code.angularjs.org/1.2.16/angular-sanitize.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bower-angular-translate/2.0.1/angular-translate.min.js'></script>
<script src='http://rawgithub.com/m-e-conroy/angular-dialog-service/v4.2.0/example/js/ui-bootstrap-tpls-0.11.0.min.js'></script>
<script src='http://rawgithub.com/m-e-conroy/angular-dialog-service/v4.2.0/dialogs.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Edit User Details in Dialog - Script Codes JS Codes
angular.module('modalTest',['ui.bootstrap','dialogs.main']) .controller('dialogServiceTest',function($scope,dialogs){ // lets assume 'users' was populated by some service $scope.users = [ {uid: 1,name: 'Abraham Lincoln',occupation: 'President',address: '1600 Pennslyvania Ave. Washington D.C.'}, {uid: 2, name: 'Bill Gates',occupation: 'Co-Founder of Microsoft',address: '123 Windows Way, Seattle WA'}, {uid: 3, name: 'Isaac Newton',occupation: 'Mathematician, Physcist, Genius',address: 'Water Lane, Woolsthorpe by Colsterworth, Lincolnshire UK'} ]; // users //== Methods ==// $scope.editUser = function(user){ var dlg = dialogs.create('/dialogs/editUser.html','editUserCtrl',user); }; // end editUser }) // end dialogServiceTest .controller('editUserCtrl',function($scope,$modalInstance,data){ $scope.user = data; //== Methods ==// $scope.done = function(){ $modalInstance.close($scope.user); }; // end done }) // end editUserCtrl .config(function(dialogsProvider){ dialogsProvider.useCopy(false); }) // end config .run(function($templateCache){ $templateCache.put('/dialogs/editUser.html','<div class="modal-header"><h4 class="modal-title"><span class="glyphicon glyphicon-pencil"></span> Edit User</h4></div><div class="modal-body"><p class="text-info">You are editting the original data of the calling controller directly, even though you are currently within the modal\'s controller.</p><div class="form-group"><label class="control-label" for="name">Name: </label><input type="text" class="form-control" id="name" ng-model="user.name"></div><div class="form-group"><label class="control-label" for="occupation">Occupation:</label><input type="text" class="form-control" id="occupation" ng-model="user.occupation"></div><div class="form-group"><label class="control-label" for="address">Address:</label><input type="text" class="form-control" id="address" ng-model="user.address"></div></div><div class="modal-footer"><button class="btn btn-primary" ng-click="done()">Done</button></div>'); }); // end run / modalTest
Developer | Michael E Conroy |
Username | m-e-conroy |
Uploaded | July 03, 2022 |
Rating | 3 |
Size | 3,211 Kb |
Views | 50,600 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Dragging in AngularJS | 2,859 Kb |
AngularJS Draggable Directive | 3,506 Kb |
AngularJS Droppable Directive With Dynamic Template | 3,748 Kb |
AngularJS Datalist Directive | 2,366 Kb |
AngularJS BootStrap 3 Modal Dialogs | 3,848 Kb |
Sass Bourbon Tests | 2,615 Kb |
AngularJS Dialog Service, with i18n | 5,197 Kb |
Button with animated timer | 2,931 Kb |
Course Layout in Angular Material | 16,237 Kb |
AngularJS Windows | 4,665 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
GsuiPopup | Mr21 | 2,641 Kb |
Mario | Takaneichinose | 3,902 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
Slim Grid SASS SCSS v3.2 | Thesturs | 4,709 Kb |
Image Hover | Johnheiner | 3,409 Kb |
CSS3 Media Queries demo | Machal | 1,824 Kb |
Process Accordion | Devilskitchen | 31,432 Kb |
Kudos Please | TimPietrusky | 6,624 Kb |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
Project -Show the Local Weather | Luciano_Britis | 2,583 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!