Question

我在angularJS中实现了一个基本表单，它从用户获取两个输入值，将其提交给返回JSON的PHP。我想在表中插入JSON的值。

我尝试过使用ng-repeat，但似乎控件永远不会回到原来的形式。

是否可以在HTML页面的表格中显示结果？

HTML页面

<!DOCTYPE html>
<head>
    <title> step 4</title>
</head>

<body ng-app="myApp">

        <form name="saveTemplateData" action="#" ng-controller="FormCtrl" >

            First name:    <br/><input type="text" ng-model="form.firstname">    <br/><br/>
            <input type="text" ng-model="form.firstname1">
            <input type="submit" id="submit" value="Submit" ng-click="submitForm()"/>

        </form>
<ul>
        <li ng-repeat="friend in friends">
            {{friend.AC_NO}}, {{friend.house_no_en}}
        </li>
    </ul>

    <script src="angular.min.js"></script>  
    <script src = "step4.js"></script>
</body>
</html>

的Javascript（step4.js）

var app = angular.module('myApp', []);
app.controller('FormCtrl', function ($scope, $http) {

    $scope.formData = {
        firstname: "default",
        firstname1: "default"
    };

    $scope.save = function() {
        formData = $scope.form;
    };

    $scope.submitForm = function() {
        console.log("posting data....");
        $scope.formData = $scope.form;

        $http({method:'GET', url:'http://127.0.0.1/testjson.php', params:{firstname:$scope.formData.firstname, firstname1:$scope.formData.firstname1}}).success(function(data){
            //var pretty;
            $scope.friends = data.response.docs;

            var str = JSON.stringify(data, undefined, 2);
            //document.write(str);

        }).error(function(data, status, headers, config) {

            alert(status);
            });
    };
});

Answer 1

如果您的$http请求确实返回了您所追求的数据，并且发生了$scope.friends分配，那么您的问题可能是您已将您的控制器声明为<form>本身。而是将ng-controller代码移动到body标签，或者创建一个封装表单和列表的div。

问题的原因是，当您指定$scope.friends = data.response.docs;时，您将分配到您的视图中的列表无法访问的FormCtrl范围。

在AngularJS中提交表单后更新表

1 个答案: