Angularjs - 简单的表单提交 [英] Angularjs - simple form submit

问题描述

我正在经历 AngularJs 的学习曲线，我发现几乎没有可以在现实世界中使用的示例.

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

我的小提琴.

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

当我说一个干净的表格时，我指的是这样的东西..

<form name="saveTemplateData" action="#" ng-controller="FormCtrl" ng-submit="submitForm()">名字:<br/><input type="text" ng-model="form.firstname"><br/><br/>电子邮件地址:<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"/>男 <br/><br/><br/><input type="checkbox" ng-model="form.member" value="5"/>已经是会员<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()" >保存</button>--><input type="submit" ngClick="Submit" ></表单>

我的 ng-app 代码...

var app = angular.module('myApp', []);app.controller('FormCtrl', function ($scope, $http) {var formData = {名字:默认"，电子邮件地址:默认"，文本区域内容:默认"，性别:默认"，成员:假的，file_profile: "默认",文件头像:默认"};$scope.save = function() {formData = $scope.form;};$scope.submitForm = function() {console.log("发布数据....");formData = $scope.form;控制台日志(表单数据)；//$http.post('form.php', JSON.stringify(data)).success(function(){/*success callback*/});};});

我想我从这里开始的三个问题是......

1. 我的 php 文件应该如何与此交互(如何将 json 字符串获取到 php 文件中的数组)?
2. 当复选框为真时，我将如何提交复选框的值?
3. 我发现了很多关于使用 jQuery 和 Angular 提交图像的信息，我看到此提交中已经有一个图像对象，我该如何检索该数据?图片中包含哪些注意事项?

我愿意把任何清晰简明的资料，为大家组装一个好的学习范例...

我的小提琴

解决方案

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

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

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

I am going through learning curve with AngularJs and I am finding that there are virtually no examples that serve real world use.

I am trying to get a clear understanding of how to submit a form with the most standard components and pass it on to a PHP file..

My fiddle.

Does anyone have any good examples on submitting simple, un-polluted, forms that would help me and probably numerous other Angularjs beginners..

When I say a clean form I am referring to something like this..

<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>

My ng-app code...

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

 });

I guess three questions I have from here on are...

1. How is my php file supposed to interact with this (how to I get the json string to an array in php file)?
2. How would I submit value of a checkbox when the checkbox is true?
3. I find a lot of information abotu using jQuery with Angular to submit images,, I see there is an image object in this submission already,, how do I retrieve that data? What are considerations to include with images?

I am willing to take any clear and concise information and assemble a good learning example for everyone...

My fiddle

解决方案

I have been doing quite a bit of research and in attempt to resolve a different issue I ended up coming to a good portion of the solution in my other post here:

Angularjs - Form Post Data Not Posted?

The solution does not include uploading images currently but I intend to expand upon and create a clear and well working example. If updating these posts is possible I will keep them up to date all the way until a stable and easy to learn from example is compiled.

这篇关于Angularjs - 简单的表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！