Question

使用下面的Angularjs脚本将记录提交到数据库。它只显示一条记录，它取代了以前提交的数据。

我希望它能够自己显示每个提交的记录。我猜这个问题可能来自数据调用

$scope.users = response.data;

<!doctype html>
<html>
    <head>
        <title></title>
        <script src="angular.min.js"></script>

    </head>
    <body >

        <div ng-app='myapp' ng-controller="userCtrl">
            <table>
                <tr>
                    <td>First Name</td>
                    <td><input type='text' id='txt_fname' ng-model='fname'></td>
                </tr>
                <tr>
                    <td>Last Name</td>
                    <td><input type='text' id='txt_lname' ng-model='lname'></td>
                </tr>
                <tr>
                    <td>Username</td>
                    <td><input type='text' id='txt_uname' ng-model='uname'></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td><input type='button' id='but_save' value='Save' ng-click="add()" ></td>
                </tr>
            </table>
            <table border="1">

                <tr>
                    <th>First name</th>
                    <th>Last name</th>
                    <th>Username</th>

                </tr>

                <tr ng-repeat="user in users">
                <td>{{user.fname}}</td>
                <td>{{user.lname}}</td>
                <td>{{user.username}}</td>

                </tr>

            </table>
        </div>

        <!-- Script -->
        <script>
        var fetch = angular.module('myapp', []);

        fetch.controller('userCtrl', ['$scope', '$http', function ($scope, $http) {

            // Add new record
            $scope.add = function(){
  var len = 20;

                //var len = $scope.users.length;
                $http({
                method: 'post',
                url: 'add.php',
                data: {fname:$scope.fname,lname:$scope.lname,uname:$scope.uname,request_type:2,len:len},
                }).then(function successCallback(response) {
$scope.users = response.data;
                  //$scope.users.push(response.data[0]);

                });
            }



        }]);

        </script>
    </body>

</html>

add.php

<?php

include 'config.php';

$data = json_decode(file_get_contents("php://input"));

$request_type = $data->request_type;


// Insert record
if($request_type == 2){
    $fname = $data->fname;
    $lname = $data->lname;
    $uname = $data->uname;


    mysqli_query($con,"insert into users33(fname,lname,username) values('".$fname."','".$lname."','".$uname."')");
    $lastinsert_id = mysqli_insert_id($con);

    $return_arr[] = array("id"=>$lastinsert_id,"fname"=>$fname,"lname"=>$lname,"username"=>$uname);
    echo json_encode($return_arr);
}

Answer 1

如上面的评论，需要初始化一个数组以推动用户进入。请参阅下面的代码。

<!doctype html>
<html>
    <head>
        <title></title>
        <script src="angular.min.js"></script>

    </head>
    <body >

        <div ng-app='myapp' ng-controller="userCtrl">
            <table>
                <tr>
                    <td>First Name</td>
                    <td><input type='text' id='txt_fname' ng-model='fname'></td>
                </tr>
                <tr>
                    <td>Last Name</td>
                    <td><input type='text' id='txt_lname' ng-model='lname'></td>
                </tr>
                <tr>
                    <td>Username</td>
                    <td><input type='text' id='txt_uname' ng-model='uname'></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td><input type='button' id='but_save' value='Save' ng-click="add()" ></td>
                </tr>
            </table>
            <table border="1">

                <tr>
                    <th>First name</th>
                    <th>Last name</th>
                    <th>Username</th>

                </tr>

                <tr ng-repeat="user in users">
                <td>{{user.fname}}</td>
                <td>{{user.lname}}</td>
                <td>{{user.username}}</td>

                </tr>

            </table>
        </div>

        <!-- Script -->
        <script>
        var fetch = angular.module('myapp', []);

        fetch.controller('userCtrl', ['$scope', '$http', function ($scope, $http) {
            // Initialize user list as array
            $scope.users = [];

            // Add new record
            $scope.add = function(){
                var len = 20;

                //var len = $scope.users.length;
                $http({
                method: 'post',
                url: 'add.php',
                data: {fname:$scope.fname,lname:$scope.lname,uname:$scope.uname,request_type:2,len:len},
                }).then(function successCallback(response) {
                    $scope.users.push(response.data[0]);
                });
            }



        }]);

        </script>
    </body>

</html>

Angularjs一直用php显示1条记录

1 个答案: