角循环没有更新 [英] Angular loop is not updating

问题描述

只是角度开始了。我成功地挽救并用PHP数据库检索数据。我也能够循环的数据的列表项目中，但是当我添加新用户列表不更新，只有当我刷新浏览器它显示新添加的用户

这是我的html code：

 ＆LT; D​​IV＆GT;
    ＆LT; UL NG-的init =GET_USER（）＆GT;
        ＆LT;李NG重复=用户用户信息＆GT; {{user.user_name}}＆LT; A HREF =NG点击=prod_delete（product.id）＆GT; - ＆GT;删除＆LT; / A＆GT;＆LT; /李＆GT;
    ＆LT; / UL＆GT;
＆LT; / DIV＆GT;
 

这是我的app.js code：

  VAR应用= angular.module（'ADDUSER'，['ui.bootstrap']）;app.controller（'AppCtrl'，函数（$范围，$ HTTP）{
    $ scope.userInfo = [];    / **功能添加细节在MySQL referecing PHP的用户** /
    $ scope.save_user =功能（）{        $ http.post（'db.php中？行动= ADD_USER'，
            {
                USER_NAME：$ scope.user_name，
                USER_EMAIL'：$ scope.user_email
            }
        ）        .success（功能（数据，状态，头，配置）{
            $ scope.userInfo.push（数据）;
            的console.log（用户已成功添加到数据库）;
            的console.log（数据）;
        }）        .error（功能（数据，状态，头，配置）{
            的console.log（无法将用户添加到数据库）;
        }）;
    }    / **函数来得到在mysql中引用PHP添加的用户信息** /
    $ scope.get_user =功能（）{
        $ http.get（'db.php中？行动= GET_USER'）。成功（功能（数据）
        {
            $ scope.userInfo =数据;
            的console.log（你是在表演用户信息succesfull）;
            //console.log(data）;
        }）
    }    }）;
 

解决方案

当你正在做的这是通过服务器的方法将数据保存到数据库中登记的电话，但在你成功后给你打电话是推动在<$ C $的数据C>用户信息对象，它在技术上的声音是错误的。

我倒是preFER你做一个Ajax从数据库获取使用新的数据 $ scope.get_user（）后后呼叫会成功。

code

  $ scope.save_user =功能（）{
    $ http.post（'db.php中？行动= ADD_USER'，{
       USER_NAME：$ scope.user_name，
       USER_EMAIL'：$ scope.user_email
    }）。成功（功能（数据，状态，头，配置）{
       //$scope.userInfo.push(data）; //删除此行
        $ scope.get_user（）; //这将获取从数据库最新记录
        的console.log（用户已成功添加到数据库）;
        的console.log（数据）;
    }）错误（功能（数据，状态，头，配置）{
        的console.log（无法将用户添加到数据库）;
    }）;
}
 

Just started out with angular. I was successful in saving and retrieving the data from a DB with php. I am also able to loop the data within a list item but when i add a new user the list does not update only when i refresh the browser does it show the newly added user

this is my html code:

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

this is my app.js code:

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

    });

解决方案

As you are doing post call which is saving data to DB through server method, but in you success of post call you are pushing that data in userInfo object which technically sounds wrong.

I'd prefer you to make an ajax to get new data from db using $scope.get_user() after post call gets succeed.

Code

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

这篇关于角循环没有更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！