Question

刚开始有角度。我成功地使用php保存和检索数据库中的数据。我也能够在列表项中循环数据但是当我添加新用户时，列表不会仅在刷新浏览器时更新它是否显示新添加的用户

这是我的HTML代码：

<div>
    <ul ng-init="get_user()">
        <li ng-repeat="user in userInfo ">{{user.user_name}}<a href="" ng-click="prod_delete(product.id)"> --> Delete</a></li>
    </ul>
</div>

这是我的app.js代码：

var app = angular.module('AddUser', ['ui.bootstrap']);

app.controller('AppCtrl', function($scope, $http){
    $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);
            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 show user info"); 
            //console.log(data);
        })
    }

    });

Answer 1

当您正在进行通过服务器方法将数据保存到数据库的后调用时，但是在您成功进行后调用时，您正在推送userInfo对象中的数据，这在技术上听起来是错误的。

我希望你在邮件调用成功后使用$scope.get_user()制作一个ajax来从db获取新数据。

<强>代码

$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); //remove this line
        $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");
    });
}

Answer 2

尝试将保存用户更改为：

$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.data);
        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");
    });
}

我认为您返回的数据是一个对象，您期望的数据是data.data，因此您将无效对象推送到userInfo数组

Angular循环未更新

2 个答案: