在AngularJS中提交表单后更新表

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 个解决方案

解决方案1
2 已采纳 2014-02-24 13:16:32

在AngularJS中提交表单后更新表

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-02-24 13:16:32

解决方案1
2 已采纳 2014-02-24 13:16:32