Question

我有一张表格：

<form ng-submit="submitForm()" name="theForm">
    <input type="number" name="age" ng-model="age" />
    <input type="submit" value="Submit" />
</form>

然后我提交：

$scope.submitForm = function() {
    $http.post('/someplace', $scope.theForm);
}

问题在于我希望POSTed数据为

{ "age", 42 }

但是它是

{
    "$error": {},
    "$name": "theForm",
    "$dirty": true,
    "$pristine": false,
    "$valid": true,
    "$invalid": false,
    "$submitted": true,
    "age": {
        "$viewValue": "42",
        "$modelValue": "42",
        "$validators": {},
        "$asyncValidators": {},
        "$parsers": [
            null,
            null
        ],
        "$formatters": [
            null
        ],
        "$viewChangeListeners": [],
        "$untouched": false,
        "$touched": true,
        "$pristine": false,
        "$dirty": true,
        "$valid": true,
        "$invalid": false,
        "$error": {},
        "$name": "age",
        "$options": null
    }
}

是否有一个简单的内置角度来获得所需的输出？

Answer 1

我认为你试图按照以往的方式做事多年;）（如果我错了，请纠正我）一般的做法是让模型在你以后寄出。

<form ng-submit="submitForm()" name="theForm">
  <input type="text" name="name" ng-model="userForm.name" required/>
  <input type="number" name="age" ng-model="userForm.age" required/>
  <input type="text" name="sex" ng-model="userForm.sex" required/>
  <input type="submit" value="Save" ng-disabled="theForm.$invalid" />
  <p ng-if="theForm.$dirty">Remember to save changes</p>
</form>

然后

$scope.submitForm = function() {
  $http.post('/someplace', {user: $scope.userForm});
}

plnr，验证http://plnkr.co/edit/WHSna0pWRfIegmwyxRt2?p=preview

Answer 2

请勿发布表单，仅发布所需数据。

$scope.submitForm = function() {
    $http.post('/someplace', { "age", $scope.age });
}

使用名称发布表单将发布角度已收集的所有表单相关数据。

修改

如果您仍希望从表单发布数据，而不是从作用域发布数据，则可以执行此操作

$scope.submitForm = function() { $http.post('/someplace', { "age", $scope.theForm.age.$modelValue }); }

$scope.theForm.age.$modelValue会在theForm 中发布名为age的输入的模型值，看起来很好看，如果你甚至没有在年龄输入上定义模型，也很有用，但认真地$scope.age会更好

Answer 3

jQuery拯救，因为Angular 1.3似乎没有一种通用的方法来获取表单元素变量而不明确列出var名称。

updated_at

Lodash（或下划线）来救援。

    $scope.submitPost = function(){
        var postVars = {};
        $('form[name="myForm"]').find('input, select, textarea').each(function(i, el){
            var varName = $(el).attr('name');
            postVars[varName] = $scope[varName];
        });
        $http.post('/some-route', {postVars : postVars});
    };

Answer 4

我想出了一些工作。这会遍历表单的数据，选择非角度属性，然后将$modelValue分配给该键：

$scope.submitForm = function() {
    var form = {};
    for (var propName in $scope.theForm) {
        if (propName.charAt(0) != '$') {
            form[propName] = $scope.theForm[propName].$modelValue;
        }
    }

    $http.post('/someplace', form);
}

从angularjs到服务器的POST表单数据

4 个答案: