Question

我正在尝试使用Angular构建一个表单，该表单使用ng-repeat在mongoDB中创建基于字段的输入。我是角度新手，所以我不太确定如何正确执行。

这是简化的html：

<form ng-controller="SettingsFormCtrl as form" ng-submit="form.processForm()" novalidate>
    <div class="tabs">
        <div class="usertab" ng-repeat="(field,value) in formData.usertab">
             <input ng-model="{{field}}" name="{{field}}" value="{{value}}" required>
             <input type="submit">
        </div>
        <div class="infotab" ng-repeat="(field, value) in formData.infotab">
             <input ng-model="{{field}}" name="{{field}}" value="{{value}}" required>
             <input type="submit">
        </div>
    </div>
</form>

这是app.js：

function SettingsFormCtrl($scope,$http){
var profile = this;
$http.get("api/profile/").success(function(response) {
    profile.result = response;
});
$scope.formData = profile.result;
$scope.processForm = function() {
    $http.post('pi/profile/submit', $scope.formData) .success(function(data) {
        console.log(data);
        if (!data.success) {
            // if not successful, bind errors to error variables
            alert('succes!');
        } else {
            // if successful, bind success message to message
            alert('no');
        }
    });
};
}
angular
.module('inspinia')
.controller('ProfileCtrl',ProfileCtrl)
.controller('SettingsFormCtrl',SettingsFormCtrl)

这是.get数据：

{
 "usertab":
           {
             "username":"Bob",
             "email":"bob@email.com"
           },
 "infotab":
           {
             "phone":"988-333-1245",
             "age":"44"
           }
}

绝对赞赏任何帮助。

Answer 1

您的问题构建不当，但我注意到一些可能导致您的代码无法正常工作的错误

在您的视图中，当您在属性中绑定值时，您不需要添加String jsonString = jsonMapper.toJson(jsonResponse); response.setContentType("application/json"); response.setCharacterEncoding("UTF-8"); response.getWriter().println(jsonString);。 Angular将自动尝试将其解析为表达式。
在你的{{}}我不确定这是否是整个项目，但是要声明（创建）一个模块，你需要添加一个空数组angular.module或一个充满你的依赖关系的数组没有它的模块，angular会认为你正在尝试注入一个模块，当它没有找到时，就会抛出错误。
另一个关键的问题是，你正在做[]的错误，你将$scope.formData的响应存储在一个超出角度范围的变量中。当结果可用时，角度将不知道，因此要使其工作，您需要将其直接存储到.get，以便角度在结果可用时立即更新视图。

我创建了一个plnkr for this来反映我所做的更改

我希望这能回答你的问题。

使用ng-repeat构建的Angular Form Submit

1 个答案: