I am having an user listing code using angular js and php...it has got a status column from where the user status can be updated.. The status gets updated in the datatbase properly but the button only changes after reloading the page ...how can it be changed after sucessful response without page redirection?
Below is the js file code :
var app = angular.module("crudApp",[]); //define application
/*
* $scope : javascript object that joins controller with view
* Model data is accesed via $scope variable
* $http : function taht allows communication with remote servers
*/
app.controller("userController",function($scope,$http){
$scope.users =[]; //defining model for "userController" controller
$scope.tempUserData ={};
$scope.getRecords = function(){ //define function to fetch all users
$http.get('action.php',{
params:{
'type':'view'
}
}).success(function(response){
if(response.status == 'OK'){
$scope.users = response.records;
}
})
};
$scope.saveUser = function(type){
var data = $.param({
'data':$scope.tempUserData,
'type':type
});
var config = {
headers : {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
}
};
$http.post("action.php", data, config).success(function(response){
if(response.status == 'OK'){
if(type == 'edit'){
}else{
$scope.users.push({
id:response.data.id,
name:response.data.name,
email:response.data.email,
phone:response.data.phone,
created:response.data.created
});
}
$scope.userForm.$setPristine();
$scope.tempUserData = {};
$('.formData').slideUp();
$scope.messageSuccess(response.msg);
}else{
$scope.messageError(response.msg);
}
});
};
// function to add user
$scope.addUser = function(){
$scope.saveUser('add');
};
// function to delete user
$scope.deleteUser = function(user){
var conf = confirm("Are you sure to delete user?");
if(conf == true){
var data = $.param({
'id': user.id,
'type': 'delete'
});
var config = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
}
};
$http.post('action.php', data, config).success(function(response){
if(response.status == 'OK'){
var index = $scope.users.indexOf(user);
$scope.users.splice(index,1);
$scope.messageSuccess(response.msg);
}else{
$scope.messageError(response.msg);
}
});
}
};
//funtion to maintain user status
$scope.changeStatus = function(user,status){
var conf = confirm("Are you sure to update user status?");
if(conf == true){
var data = $.param({
'id': user.id,
'type': 'updateStatus',
'status': status
});
var config = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
}
};
//console.log(data);
$http.post('action.php', data, config).success(function(response){
if(response.status == 'OK'){
$scope.messageSuccess(response.msg);
}else{
}
});
}
} ;
// function to display success message
$scope.messageSuccess = function(msg){
$('.alert-success > p').html(msg);
$('.alert-success').show();
$('.alert-success').delay(5000).slideUp(function(){
$('.alert-success > p').html('');
});
};
// function to display error message
$scope.messageError = function(msg){
$('.alert-danger > p').html(msg);
$('.alert-danger').show();
$('.alert-danger').delay(5000).slideUp(function(){
$('.alert-danger > p').html('');
});
};
})
Index.html is as below :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="script.js"></script>
<style>
/* required style*/
.none{display: none;}
/* optional styles */
table tr th, table tr td{font-size: 1.2rem;}
.row{ margin:20px 20px 20px 20px;width: 100%;}
.glyphicon{font-size: 20px;}
.glyphicon-plus{float: right;}
a.glyphicon{text-decoration: none;cursor: pointer;}
.glyphicon-trash{margin-left: 10px;}
.alert{
width: 50%;
border-radius: 0;
margin-top: 10px;
margin-left: 10px;
}
</style>
</head>
<body ng-app="crudApp">
<div class="container" ng-controller="userController" ng-init="getRecords()">
<div class="row">
<div class="panel panel-default users-content">
<div class="panel-heading">Users
<a href="javascript:void(0);" class="glyphicon glyphicon-plus" onclick="$('.formData').slideToggle();"></a>
</div>
<div class="alert alert-danger none"><p></p></div>
<div class="alert alert-success none"><p></p></div>
<div class="panel-body none formData">
<form class="form" name="userForm">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" ng-model="tempUserData.name"/>
</div>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" name="email" ng-model="tempUserData.email"/>
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" class="form-control" name="phone" ng-model="tempUserData.phone"/>
</div>
<a href="javascript:void(0);" class="btn btn-warning" onclick="$('.formData').slideUp();">Cancel</a>
<a href="javascript:void(0);" class="btn btn-success" ng-hide="tempUserData.id" ng-click="addUser()">Add User</a>
<a href="javascript:void(0);" class="btn btn-success" ng-hide="!tempUserData.id" ng-click="updateUser()">Update User</a>
</form>
</div>
<table class="table table-striped">
<tr>
<th width="5%">#</th>
<th width="20%">Name</th>
<th width="30%">Email</th>
<th width="20%">Phone</th>
<th width="14%">Created</th>
<th width="0%">Status</th>
<th width="10%">Action</th>
</tr>
<tr ng-repeat="user in users">
<td>{{ $index + 1 }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.phone }}</td>
<td>{{ user.created }}</td>
<td ng-if="user.status == 1"><button class="button" ng-class="{'active': isActive}" ng-click="changeStatus(user,0)" type="button">Active</button></td>
<td ng-if="user.status == 0"><button class="button" ng-class="{'active': isActive}" ng-click="changeStatus(user,1)" type="button">Inactive</button></td>
<td>
<a href="javascript:void(0);" class="glyphicon glyphicon-edit" ng-click="editUser(user)"></a>
<a href="javascript:void(0);" class="glyphicon glyphicon-trash" ng-click="deleteUser(user)"></a>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
That is because you are not updating the status of user object.
Modify the ng-click function and add $index so that you will be able to track the corresponding user and update the status.
<td ng-if="user.status == 1"><button class="button"
ng-class="{'active': isActive}" ng-click="changeStatus($index, user,0)"
type="button">Active</button></td>
<td ng-if="user.status == 0"><button class="button"
ng-class="{'active': isActive}" ng-click="changeStatus($index, user,1)"
type="button">Inactive</button></td>
Modify the changeStatus method signature like below:
//funtion to maintain user status $scope.changeStatus = function(userIndex, user,status){
var conf = confirm("Are you sure to update user status?");
if(conf == true){
var data = $.param({
'id': user.id,
'type': 'updateStatus',
'status': status
});
var config = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
}
};
//console.log(data);
$http.post('action.php', data, config).success(function(response){
if(response.status == 'OK'){
// update the `user` Array
$scope.users[userIndex].status = status;
$scope.messageSuccess(response.msg);
}else{
}
});
}
} ;
I implemented the similar kind of behavior without using backend. See my plnkr