角度循环未更新

Angular loop is not updating

本文关键字：更新 循环      更新时间：2023-09-26

刚开始使用angular。我成功地用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);
        })
    }
    });

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

我更希望您在后调用成功后，使用$scope.get_user()制作一个ajax来从数据库获取新数据。

代码

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

尝试将保存用户更改为：

$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数组

相关文章：