Question

首先，我的后端正在使用cakePHP 2.3，所以我想要ajax方式序列化所有。

目前我有一个表单来测试序列化函数是否正常工作

//index
<http ng-app="app">...
<div ng-controller="appCtrl" ng-model='data'>...
<form ng-submit="helloWorld(this)" onsubmit="event.returnValue = false; return false;">
...</form><div></http>

//app.js
var app = angular.module('app', []);
app.controller("appCtrl", function($scope){
    $scope.helloWorld = function(element){
        console.log(element);
    }
});

然而，它只是返回一堆项目。试过$（element.target）.serialize（）但是它无法工作。找到一种等效的数据处理方式：$（element.target）.serialize（）。

JsFiddle在http://jsfiddle.net/eX7fB/

版本2，用于解释http://jsfiddle.net/eX7fB/1/

Answer 1

这是updated jsfiddle。

为了从表单中提取表单数据，最好使用表单名称并在输入元素上使用ng-model：

HTML：

<form name="form1" ng-submit="helloWorld()">
    <input name="color" ng-model="color" type="text">
    <input name="range" ng-model="range" type="text">
    <input type="submit" value="submit">
 </form>

JS：

$scope.helloWorld = function(){
    console.log($scope.form1);
    console.log($scope.color);
    console.log($scope.range);
    alert($scope.form1);
    alert($scope.color);
    alert($scope.range);
}

表单文档为here。

Answer 2

我发现获取表单数据的最简单方法是创建一个包含表单所有模型的对象。由于您不需要从控制器指定每个模型，因此您只需创建一个最终将包含所有表单信息的空对象。

app.controller('MainCtrl', function($scope) {
  $scope.form = {};
  $scope.submitform = function(){
     console.log($scope.form)
  }
});

您必须在HTML <input type="text" ng-model="form.name">中指定模型绑定，但现在表单对象将包含名为 name 的其他对象。

现在可以将表单对象传递给ajax数据。

检查this plunker以查看我创建的示例。希望这会有所帮助。

<强>更新

你好。好吧，我可能误解了你的问题。如果您确实需要序列化check this fiddle表格，看看是否符合您的要求。您必须在 ng-submit 中传递 $ event 对象，而不是此，然后您可以使用正常的jQuery内容处理该事件。虽然我真的怀疑这是一个很好的做法。

Answer 3

我已经为您提供了一种参考Getting attribute of element in ng-click function in angularjs

的序列化替代方法

虽然有些人可能会说这不是有角度的方式，但是因为你使用cakePHP作为后端，为什么不只是保持简单傻。（通过添加ng-model和重建表单助手来节省大量空间。节省了很多空间。

//index
<http ng-app="app">...
<div ng-controller="appCtrl" ng-model='data'>...
<form ng-submit="helloWorld($event)" onsubmit="event.returnValue = false; return false;">
...</form><div></http>

//app.js
var app = angular.module('app', []);
app.controller("appCtrl", function($scope){
    $scope.helloWorld = function(obj){
        console.log(obj);
        alert($(obj.target).serialize());
    }
});

ng-submit序列化表格中的angularJs（ajax方式）

3 个答案: