Angular 循环没有更新

Question

刚开始 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);
        })
    }

    });

Answer 1

尝试将保存用户更改为此：

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

Answer 2

当您执行 post 调用时，它通过服务器方法将数据保存到数据库，但是在您成功调用 post 时，您正在将该数据推送到 userInfo 对象中，从技术上讲听起来不对。

我希望您在 post 调用成功后使用 $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");
    });
}

Angular 循环没有更新

Angular loop is not updating

javascript

php

mysql

angularjs

angularjs-http