有没有更有效的方法来用 angularjs 序列化表单？答案

【问题标题】：Is there a more effective way to serialize a form with angularjs?有没有更有效的方法来用 angularjs 序列化表单？
【发布时间】：2013-04-08 10:48:28
【问题描述】：

有没有办法为 angularjs 序列化函数？

我的帖子现在看起来像这样。

$scope.signup_submit = function () {
  var formData = {
    username: $scope.username,
    full_name: $scope.full_name,
    email: $scope.email,
    password: $scope.password,
    confirm_password: $scope.confirm_password
  }

  $http({
    method: "POST",
    url: '/signup',
    data: formData,
  }).success(function (data) {
    if (data.status == 'success') {
      alert('all okay');
    } else {
      alert(data.msg)
    }
  });
}

【问题讨论】：

你试过了吗：$element.serialize()？
是的，它返回未定义的函数序列化
我认为他的意思是 $(element).serialize();你当然需要有 JQuery 才能做到这一点。
嗯，我认为 jquery 不能很好地使用 angular 看起来是个错误，我会尝试，谢谢
事实上，您不应该将 Angular 元素包装在 $ 中，因为如果 jQuery 存在，它会被默认包装。如果不存在 jQuery，则 Angular 使用小版本，the jqLite。

标签： javascript serialization angularjs

【解决方案1】：

这不是您应该使用 AngularJS 访问表单数据的方式。表单中的数据应该在范围内绑定。

所以使用一个对象，例如$scope.formData，它将包含您所有的数据结构，那么您的每个表单元素都应该使用 ng-model 绑定到它。

例如：

http://jsfiddle.net/rd13/AvGKj/13/

<form ng-controller="MyCtrl" ng-submit="submit()">
    <input type="text" name="name" ng-model="formData.name">
    <input type="text" name="address" ng-model="formData.address">
    <input type="submit" value="Submit Form">
</form>

function MyCtrl($scope) {
    $scope.formData = {};

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

当提交上述表单时，$scope.formData 将包含您的表单对象，然后可以在您的 AJAX 请求中传递该对象。例如：

Object {name: "stu", address: "england"}

要回答您的问题，没有更好的方法可以使用 AngularJS 来“序列化”表单数据。

不过你可以使用 jQuery：$element.serialize()，但如果你想正确使用 Angular，那么请使用上述方法。

【讨论】：

当您在一个页面上有多个表单时，这不会很好用，例如作为 ng-repeat 指令的一部分...
@Kevin 查看 ng-form 以获取动态创建的表单（例如，作为 ng-repeat 指令的一部分）scotch.io/tutorials/javascript/…
我以为问题是关于表单的序列化。
$scope.formData 是一个对象。对象的属性可以由您的拦截器或转换器更改。这意味着您将让框架更改您的对象并绑定回您的 UI。我认为这不是一个理想的“功能”