Javascript 将表单数据从angularjs发布到服务器

我有一张表格：

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

问题是我希望发布的数据

{ "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
    }
}

---

在angular中是否有一种简单的内置方式来获得所需的输出？

不要发布表单，只发布所需的数据

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

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

编辑：

如果您仍然希望从表单而不是从范围发布数据，可以这样做

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

$scope.theForm.age.$modelValue

将在表单中发布名为age的输入的模型值，看起来很好读，如果您甚至没有在age输入上定义模型，它也很有用，

---

但是说真的，

$scope.age

会更好一些

我想出了一些解决办法。这将在表单的数据中循环选择非角度属性，然后将

$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);
}

---

我认为你正在试图按照多年来习惯的方式做事；）（如果我错了，请纠正我）一般做法是有一个模型，稍后你们会发送

<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>

---

带验证的plnr

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

    $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});
    };

（或下划线）拯救

$scope.submitPost = function(){
    var postVars = _.pick($scope, ['objKey1','objKey2','objKey3']);
    $http.post('/some-route', {postVars : postVars});
};

---

我一直在寻找一个通用的解决方案来发布表单数据，而不是每次都要手动编写post函数。谢谢，但它仍然需要每次手动编写此方法。我实际上想出了一个解决方案，我已经发布了。谢谢你的时间。谢谢你的建议。那么使用

name=“theForm”

有什么意义呢？@dav_i它用于验证，该验证是在Angular 1.3版本中添加的。@AlekseiChepovoi实际上验证是在前面介绍的，dav_i我将通过validation@maurycy我不知道。我在1.3版本后停止编写自定义验证器）@AlekseiChepovoi刚刚用AngularJS 1.1.4检查过，它已经存在了；）这似乎很复杂。虽然可以从表单模型对象的深层获取值，但为什么不直接将它们放在

$scope

的根上呢？我认为Angular打算显式地指定所有变量，因为除了这种复杂的方法之外，没有其他方法可以获得通用的解决方案。

    $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});
    };

$scope.submitPost = function(){
    var postVars = _.pick($scope, ['objKey1','objKey2','objKey3']);
    $http.post('/some-route', {postVars : postVars});
};