Angularjs – 简单的表单提交

我正在通过AngularJs学习曲线,我发现实际上没有任何示例可以为现实世界使用。

我想清楚了解如何使用最标准的组件提交表单并将其传递给PHP文件。

我的小提琴

有没有人有提交简单的,没有污染的forms,可以帮助我和其他许多Angularjs初学者的好例子..

当我说一个干净的forms,我指的是这样的事情..

<div ng-app="myApp"> <form name="saveTemplateData" action="#" ng-controller="FormCtrl" ng-submit="submitForm()"> First name: <br/><input type="text" ng-model="form.firstname"> <br/><br/> Email Address: <br/><input type="text" ng-model="form.emailaddress"> <br/><br/> <textarea rows="3" cols="25" ng-model="form.textareacontent"></textarea> <br/><br/> <input type="radio" ng-model="form.gender" value="female" />Female ... <input type="radio" ng-model="form.gender" value="male" />Male <br/> <br/><br/> <input type="checkbox" ng-model="form.member" value="5"/> Already a member <br/><br/> <input type="file" ng-model="form.file_profile" id="file_profile"><br/> <input type="file" ng-model="form.file_avatar" id="file_avatar"> <br/><br/> <!-- <button ng-click="save()" >Save</button> --> <input type="submit" ngClick="Submit" > </form> </div> 

我的ng-app代码…

 var app = angular.module('myApp', []); app.controller('FormCtrl', function ($scope, $http) { var formData = { firstname: "default", emailaddress: "default", textareacontent: "default", gender: "default", member: false, file_profile: "default", file_avatar: "default" }; $scope.save = function() { formData = $scope.form; }; $scope.submitForm = function() { console.log("posting data...."); formData = $scope.form; console.log(formData); //$http.post('form.php', JSON.stringify(data)).success(function(){/*success callback*/}); }; }); 

我想这三个问题是…

  1. 我的PHP文件应该如何与此交互(如何获得JSONstring到PHP文件中的数组)?
  2. 当checkbox为真时,我将如何提交checkbox的值?
  3. 我发现很多信息abotu使用jQuery与Angular提交图像,,我看到有一个图像对象已经提交,我如何检索该数据? 包含图像的注意事项是什么?

我愿意拿出任何清晰简明的信息,为每个人树立一个好的学习榜样。

我的小提琴

我已经在这里重写你的JS小提琴: http : //jsfiddle.net/YGQT9/

 <div ng-app="myApp"> <form name="saveTemplateData" action="#" ng-controller="FormCtrl" ng-submit="submitForm()"> First name: <br/><input type="text" name="form.firstname"> <br/><br/> Email Address: <br/><input type="text" ng-model="form.emailaddress"> <br/><br/> <textarea rows="3" cols="25">Describe your reason for submitting this form ... </textarea> <br/> <input type="radio" ng-model="form.gender" value="female" />Female ... <input type="radio" ng-model="form.gender" value="male" />Male <br/> <br/> <input type="checkbox" ng-model="form.member" value="true"/> Already a member <input type="checkbox" ng-model="form.member" value="false"/> Not a member <br/> <input type="file" ng-model="form.file_profile" id="file_profile"><br/> <input type="file" ng-model="form.file_avatar" id="file_avatar"> <br/><br/> <input type="submit"> </form> </div> 

看到我在使用基本的html表单提交时正在使用大量的angular度指令(ng-controller,ng-model,ng-submit)。 虽然通常所有的“angular度方式”的替代scheme工作,表格提交被Angular拦截和取消,以允许您操作数据并手动提交。

虽然注意到任何types的ajax / http post /在jsFiddle中都有问题,所以你将不得不在本地运行它。

有关angular度表单提交的一般build议,请看这里: http ://docs.angularjs.org/cookbook/advancedformangular的食谱有很多示例代码,这将有助于文档不是非常人性化。

知道Angularjs改变了你的整个web开发过程,不要试图用你习惯于使用jQuery或者常规的html / js的方式来做事,但是对于你所做的一切来看看一些示例代码,因为几乎总是有angular度替代。

我一直在做相当多的研究,试图解决另外一个问题,结果我在另一篇文章中find了很好的解决scheme:

Angularjs – 表单发布数据没有发布?

该解决scheme目前不包括上传图片,但是我打算扩展并创build一个清晰且工作良好的示例。 如果更新这些post是可能的,我会保持他们最新的一路,直到稳定和容易学习的例子编译。

我认为AngularJS对表单提交没有太多的理由,因为它更多地取决于“双向数据绑定”。 在传统的html开发中,你有一种数据绑定的方式,即一旦DOM呈现你对DOM元素所做的任何更改,都不会反映在JS Object中,然而在AngularJS中,它同时工作。 因此实际上没有必要提交。 我做了一个使用AngularJS的中型应用程序,而不需要提交表单。 如果你热衷于提交表单,你可以编写一个包含你的表单的命令,处理ENTER键和单击事件,并调用form.submit()。

如果你想要这样的指令的示例源代码,请通过评论这个让我知道。 我想出了一个简单的指令,你可以自己写。

将数据发送到某个服务页面。

 <form class="form-horizontal" role="form" ng-submit="submit_form()"> <input type="text" name="user_id" ng-model = "formAdata.user_id"> <input type="text" id="name" name="name" ng-model = "formAdata.name"> </form> $scope.submit_form = function() { $http({ url: "http://localhost/services/test.php", method: "POST", headers: {'Content-Type': 'application/x-www-form-urlencoded'}, data: $.param($scope.formAdata) }).success(function(data, status, headers, config) { $scope.status = status; }).error(function(data, status, headers, config) { $scope.status = status; }); }