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

Question

我有一个巨大的表格，大约有 80 / 90 个输入。

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

我知道 jquery 您可以使用 serialize() 功能选择表格。 angular 中是否有辅助函数来实现这一点？

谢谢

Answer 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 way" 因此，您应该有一些绑定到表单输入的对象 - 您应该只是提交。

<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(...);
}

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

Retrieve all inputs values from a form AngularJS

forms

angularjs