Question

我有一个大概的形式，或多或少80/90输入。

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

我知道使用jquery可以使用serialize()函数选择表单。是否有角度的辅助功能来实现这一目标？

由于

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方式”，因此，您应该有一些绑定到表单输入的对象 - 您应该只提交它。

<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中检索所有输入值

1 个答案: