Based on my previous post: Angular loop is not updating, i updated the code slightly to add a dialog box to the button a a user.
the only change in my app.js file is the directive to add a $mdDialog box. so the complete code for my app.js file is:
var app = angular.module('AddUser', ['ngMaterial']);
app.controller('AppCtrl', function($scope, $http, $mdDialog){
$scope.userInfo = [];
/** function to add details for a 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 will fetch latest record from DB
console.log("The user has been added successfully to the DB");
console.log(data);
})
.error(function(data, status, headers, config) {
console.log("Failed to add the user to DB");
});
}
/** function to get 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 were succesfull in showing user info");
//$scope.get_user(); //this will fetch latest record from DB
})
}
/** function to delete a user from 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 will fetch latest record from DB
console.log('Deletion was succesfull');
})
.error(function(data, status, headers, config) {
console.log("You were NOT succesfull in deleting a 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 to comment out the following code in the get_user function ($scope.get_user();) otherwise i could not preform a delete but then on the other hand the loop did not update. so either i comment out $scope.get_user() in de get_user function and then i can delete a user or i don't comment it out and the loop will update when i add a new user but then the delete function does 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 a user</md-button>
</body>
and the code for the dialog box (popup.tmpl.html) is the following:
<md-dialog aria-label="Add or invite a user" ng-app="AddUser">
<form ng-controller="AppCtrl">
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Add or invite a 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 a 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 an 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>
Aucun commentaire :
Enregistrer un commentaire