javascript - Angular does not updated loop due to implementation $mdDialog (Material Design) -
based on previous post: angular loop not updating, updated code add dialog box button a user.
the change in app.js file directive add $mddialog box. complete code app.js file is:
var app = angular.module('adduser', ['ngmaterial']); app.controller('appctrl', function($scope, $http, $mddialog){ $scope.userinfo = []; /** function add details user in mysql referecing php **/ $scope.save_user = function() { $http.post('db.php?action=add_user', { 'user_name' : $scope.user_name, 'user_email' : $scope.user_email } ) .success(function (data, status, headers, config) { $scope.userinfo.push(data); $scope.get_user(); //this fetch latest record db console.log("the user has been added db"); console.log(data); }) .error(function(data, status, headers, config) { console.log("failed add user db"); }); } /** function info of user added in mysql referencing php **/ $scope.get_user = function() { $http.get('db.php?action=get_user').success(function(data) { $scope.userinfo = data; console.log("you succesfull in showing user info"); //$scope.get_user(); //this fetch latest record db }) } /** function delete user list referencing php **/ $scope.delete_user = function(index) { $http.post('db.php?action=delete_user', { 'user_index' : index } ) .success(function (data, status, headers, config) { $scope.get_user();//this fetch latest record db console.log('deletion succesfull'); }) .error(function(data, status, headers, config) { console.log("you not succesfull in deleting user"); }); } $scope.showpopup= function(ev) { $mddialog.show({ controller: dialogcontroller, templateurl: 'popup.tmpl.html', parent: angular.element(document.body), targetevent: ev, }) }; function dialogcontroller($scope, $mddialog) { $scope.closedialog = function() { $mddialog.hide(); } $scope.save_user = function() { $mddialog.hide(); } } }); i had comment out following code in get_user function ($scope.get_user();) otherwise not preform delete on other hand loop did not update. either comment out $scope.get_user() in de get_user function , can delete user or don't comment out , loop update when add new user delete function not work ...
my html code is:
<body ng-controller="appctrl"> <div> <ul ng-init="get_user()"> <li ng-repeat="user in userinfo ">{{user.user_name}}<a href="#" ng- click="delete_user(user.id)"> --> delete</a></li> </ul> </div> <md-button class="md-primary md-raised" ng-click="showpopup($event)" flex flex-md="100">add user</md-button> </body> and code dialog box (popup.tmpl.html) following:
<md-dialog aria-label="add or invite user" ng-app="adduser"> <form ng-controller="appctrl"> <md-toolbar> <div class="md-toolbar-tools"> <h2>add or invite user</h2> <span flex></span> <md-button class="md-icon-button" ng-click="closedialog()"> <md-icon md-svg-src="images/ic_close_24px.svg" aria-label="close dialog"></md-icon> </md-button> </div> </md-toolbar> <md-dialog-content> <div> <div layout="" layout-sm="column"> <md-input-container flex=""> <label>enter name</label> <input name="user_email" ng-model="user_name"> </md-input-container> </div> <div layout="" layout-sm="column"> <md-input-container flex=""> <label>enter e-mail</label> <input name="user_name" ng-model="user_email"> </md-input-container> </div> </div> </md-dial <div class="md-actions" layout="row"> <md-button ng-click="closedialog()" class="md-primary">cancel</md- button> <md-button ng-click="save_user()" name="add_user" class="md- primary">add</md-button> </div> </form> </md-dialog>
check snippet.
var app = angular.module('adduser', ['ngmaterial']); app.run(['$templatecache', function($templatecache) { $templatecache.put('popup.tmpl.html', '<md-dialog aria-label="add or invite user" ng-app="adduser">' + '<form ng-controller="appctrl">' + '<md-toolbar>' + '<div class="md-toolbar-tools">' + '<h2>add or invite user</h2>' + '<span flex></span>' + '<md-button class="md-icon-button" ng-click="closedialog()">' + '<md-icon md-svg-src="images/ic_close_24px.svg" aria-label="close dialog"></md-icon>' + '</md-button>' + '</div>' + '</md-toolbar>' + '<md-dialog-content>' + '<div>' + '<div layout="" layout-sm="column">' + '<md-input-container flex="">' + '<label>enter name</label>' + '<input name="user_email" ng-model="user_name">' + '</md-input-container>' + '</div>' + '<div layout="" layout-sm="column">' + '<md-input-container flex="">' + '<label>enter e-mail</label>' + '<input name="user_name" ng-model="user_email">' + '</md-input-container>' + '</div>' + ' </div>' + '</md-dialog-content>' + '<div class="md-actions" layout="row">' + '<md-button ng-click="closedialog()" class="md-primary">' + 'cancel' + '</md-button>' + '<md-button ng-click="save()" name="add_user" class="md-primary">' + 'add' + '</md-button>' + '</div>' + '</form>' + '</md-dialog>'); } ]); app.factory('usersservice', ['$q', function($q) { var service = {}; service.data = [{ user_name: 'stack overflow', id: 1 }]; service.get = function() { var deferred = $q.defer(); deferred.resolve(service.data); return deferred.promise; } service.save = function(data) { var deferred = $q.defer(); data.id = math.floor((math.random() * 999) + 111); service.data.push(data); deferred.resolve(); return deferred.promise; } service.delete = function(user) { var deferred = $q.defer(); alert('deleting user ' + user.id); var index = service.data.indexof(user); service.data.splice(index, 1); deferred.resolve(); return deferred.promise; } return service; } ]); app.controller('appctrl', function($scope, $http, $mddialog, usersservice) { $scope.userinfo = []; function getusers() { usersservice.get().then(function(data) { _this.userinfo = data; }); } getusers(); this.showpopup = function(ev) { $mddialog.show({ controller: dialogcontroller, templateurl: 'popup.tmpl.html', parent: angular.element(document.body), targetevent: ev, }) }; this.delete_user = function(user) { usersservice.delete(user).then(function() { getusers(); }); }; $scope.save = function() { var obj = { 'user_name': $scope.user_name, 'user_email': $scope.user_email }; usersservice.save(obj).then(function() { getusers(); $mddialog.hide(); }); } function dialogcontroller($scope, $mddialog) { $scope.closedialog = function() { $mddialog.hide(); } } var _this = this; });<!doctype html> <html lang="en" ng-app="adduser"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>test 1 - add user</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> <link href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet" /> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=robotodraft:300,400,500,700,400italic" /> <!-- html5 shim , respond.js ie8 support of html5 elements , media queries --> <!-- warning: respond.js doesn't work if view page via file:// --> <!--[if lt ie 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body ng-controller="appctrl _"> <div> <ul> <li ng-repeat="user in _.userinfo ">{{user.user_name}} [{{user.id}}]<a href="#" ng-click="_.delete_user(user)"> --> delete</a> </li> </ul> </div> <md-button class="md-primary md-raised" ng-click="_.showpopup($event)" flex="" flex-md="100"> add user </md-button> <!-- <button type="button" id="btnadduser" class="btn btn-primary">add user</button> --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script> <script src="js/app.js"></script> </body>
Comments
Post a Comment