从表单 AngularJS 中检索所有输入值答案

【问题标题】：Retrieve all inputs values from a form AngularJS从表单 AngularJS 中检索所有输入值
【发布时间】：2015-01-16 13:17:07
【问题描述】：

我有一个包含或多或少 80 / 90 个输入的庞大表单。

我的主要问题是如何在 ajax 请求中传递所有属于唯一形式的输入而不将输入手动映射到对象中？

我知道使用 jquery 您可以使用serialize() 函数选择表单。有没有 Angular 中的辅助函数来实现这一点？

谢谢

【问题讨论】：

听起来您没有在表单中使用ng-model。你能发布你到目前为止的 html/js 吗？也许只显示几个输入...
是的，您需要在每个输入中使用 ng-model，例如 person.name、person.address、person.secondname ..... 提交时您只需发送对象“person”（这将自动转换为 json)。
哦，没错，我目前在输入中使用ng-model，但我不认为传递范围对象来获取所有值！ :) 谢谢

标签： angularjs forms

【解决方案1】：

确实，正如 Michal 的评论所建议的，您使用的似乎不是ng-model。

Angular 的 jqLite 不支持 serialize()，因为使用 Angular 通常会构建一个 ViewModel，然后将其绑定到表单。

但是，如果您运气不好，您可以添加 jQuery.js 以获得 serialize() 支持并创建一个简单的指令 - serializer - 它将作用于表单。

app.directive("serializer", function(){
  return {
    restrict: "A",
    scope: {
      onSubmit: "&serializer"
    },
    link: function(scope, element){
      // assuming for brevity that directive is defined on <form>

      var form = element;

      form.submit(function(event){
        event.preventDefault();
        var serializedData = form.serialize();

        scope.onSubmit({data: serializedData});
      });

    }
  };
});

并按如下方式使用：

<form serializer="submit(data)">
  <input name="foo">
  <input name="bar">
  <button type="submit">save</button>
</form>

在控制器中：

$scope.submit = function(data){
   console.log(data);
}

plunker

编辑：

如果您使用ng-model 并且实际上有一个正确的 ViewModel，那么这是“Angular 方式”，因此，您应该有一些对象绑定到表单输入 - 您应该提交它。

<form name="foo" ng-submit="onSubmit()">
  <input ng-model="fooObject.a">
  <input ng-model="fooObject.b">
  ...
</form>

$scope.fooObject = {};
$scope.onSubmit = function(){
   $http.post("url/to/server", {data: $scope.fooObject})
     .success(...);
}

【讨论】：

谢谢！我在输入中使用了ng-model，但我没有想到它会生成具有所有值的对象。谢谢！您能否添加一些关于您如何使用 ng-model 实现这一点的 sn-p 以便接受您的问题是正确的 :)