使用php更新角度js中状态更新的模态数据

时间:2017-02-23 11:49:48

标签: php angularjs

我有一个使用角度js和php的用户列表代码...它有一个状态列,用户状态可以更新到... 状态在数据库中正确更新,但按钮仅在重新加载页面后更改...如何在没有页面重定向的成功响应后更改?

以下是js文件代码:

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如下:

<!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>

1 个答案:

答案 0 :(得分:0)

这是因为您没有更新user对象的状态。

修改ng-click功能并添加$index,以便您能够跟踪相应的用户并更新状态。

<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>

修改changeStatus方法签名,如下所示:

//维护用户状态的功能     $ 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{
            }
        });
    }
} ;

我在不使用后端的情况下实现了类似的行为。 查看我的plnkr