从表单AngularJS中检索所有输入值 [英] Retrieve all inputs values from a form AngularJS

问题描述

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

我的主要问题是如何在ajax请求中将所有属于唯一窗体的输入传递给对象，

我知道使用jquery可以使用 serialize（）函数选择表单。有没有帮助函数实现这一目标？

谢谢

解决方案

<事实上，正如Michal的评论所暗示的那样，它看起来并不像你在使用 ng-model 。

Angular的jqLit​​e不支持 serialize（），因为Angular通常会建立一个ViewModel，然后绑定到一个表单。

但是，如果您运气不好，可以添加jQuery.js来获取 serialize（）支持并创建一个简单的指令 - serializer - 这将在表单上执行。

  app.directive（serializer，函数（）{
 return {
 restrict：A，
 scope：{
 onSubmit：& serializer
}，
 link：函数（范围，元素）{
 //假设为了简洁，该指令在< form> 
 
 var form = element; 
 
 form.submit（功能（事件）{
平安夜nt.preventDefault（）; 
 var serializedData = form.serialize（）; 
 
 scope.onSubmit（{data：serializedData}）; 
}）; 
 
} 
}; 
}）; 
  

并如下使用它：

 < form serializer =submit（data）> 
< input name =foo> 
< input name =bar> 
< button type =submit>保存< / button> 
< / form> 
  

并在控制器中：

  $ scope.submit = function（data）{
 console.log（data）; 
} 
  

plunker

编辑：

如果你正在使用 ng-model 并且实际上有一个合适的ViewModel，那么这就是Angular way，所以你应该有一些对象

 < form name =foong-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（...） ; 
} 
  

I have a massive form with more or less 80 / 90 inputs.

My main problem is How can I pass all those inputs belonging to unique form in an ajax request without map the inputs manually into a object?

I know that with jquery you can use serialize() function selecting the form. Is there any helper function in angular to achieve that?

Thanks

解决方案

Indeed, as Michal's comment suggested, it doesn't look like you are using ng-model.

Angular's jqLite doesn't support serialize() since with Angular one would typically build a ViewModel that would then be bound to a form.

But, if you are out of luck, you could add jQuery.js to get the serialize() support and create a simple directive - serializer - that would act on a form.

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

    }
  };
});

And use it as follows:

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

And in the controller:

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

plunker

EDIT:

If you are using ng-model and in fact have a proper ViewModel, then this is the "Angular way" and so, you should have some object that is bound to the form inputs - you should just submit that.

<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中检索所有输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！