Angularjs - 简单表单提交

Question

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

我试图清楚地了解如何提交具有最标准组件的表单并将其传递给PHP文件.

我的小提琴.

有没有人有任何关于提交简单,无污染的表格的好例子,这些表格可以帮助我和许多其他Angularjs初学者.

当我说一个干净的形式时,我指的是这样的东西..

<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文件应该如何与此交互(如何将json字符串转换为php文件中的数组)？
2. 当复选框为true时,如何提交复选框的值？
3. 我发现很多信息abotu使用jQuery与Angular提交图像,我看到这个提交中已有一个图像对象,我该如何检索该数据？图像包含哪些注意事项？

我愿意接受任何简明扼要的信息,并为每个人聚集一个良好的学习榜样......

我的小提琴

Answer 1

我在这里改写了你的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>

看到我正在使用大量的角度指令(ng-controller,ng-model,ng-submit),你计划使用基本的html表单提交.虽然通常是"角度方式"的所有替代方法,但是Angular会截取并取消表单提交,以允许您操作数据并手动提交.

虽然注意到jsFiddle中任何类型的ajax/http post/get都有问题所以你必须在本地运行它.

有关角度表单提交的一般建议,请参阅此处:http ://docs.angularjs.org/cookbook/advancedform angular的cookbook有很多示例代码,这将有助于文档不是非常用户友好.

知道Angularjs会改变你的整个web开发过程,不要像你习惯使用JQuery或常规的html/js那样尝试做事,但是对于你所做的一切都要看看一些示例代码,因为几乎总是角度替代.

Answer 2

我一直在做大量的研究，并试图解决一个不同的问题，我最终在我的另一篇文章中找到了解决方案的很大一部分：

Angularjs - 表单发布数据未发布？

该解决方案目前不包括上传图像，但我打算扩展并创建一个清晰且运行良好的示例。如果可以更新这些帖子，我将使它们一直保持最新状态，直到编译出稳定且易于学习的示例。