Javascript Angularjs-简单表单提交

我正在经历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>

我想从现在开始我有三个问题

我的php文件应该如何与此交互（如何将json字符串获取到php文件中的数组）

当复选框为true时，如何提交复选框的值

我在使用jQuery和Angular提交图像时发现了很多信息，我看到在提交中已经有一个图像对象了，我如何检索这些数据？图像中包括哪些注意事项

我愿意收集任何清晰简洁的信息，并为大家收集一个好的学习范例

我的

警告这是针对角度1.x的 如果您正在寻找Angular（v2+，当前版本8），请尝试此选项或

---

原始答案 我在这里重写了你的JS小提琴：

名字：




电子邮件地址：




请描述您提交此表格的原因。。。


女性
男性



已经是会员了
不是会员

在这里，我使用了大量的角度指令（

ng controller

，

ng model

，

ng submit

），其中使用了基本的html表单提交。 通常，“angular方式”的所有替代方案都可以工作，但angular会截取并取消表单提交，以允许您在提交之前操作数据

但是JSFiddle无法正常工作，因为它不允许任何类型的ajax/httppost/get，因此您必须在本地运行它

有关角形表单提交的一般建议，请参阅

更新食谱不见了。相反，请看1.x指南

angular的cookbook有很多示例代码，这些代码会对用户很有帮助，因为这些文档对用户不是很友好

---

Angularjs改变了您的整个web开发过程，不要尝试使用JQuery或常规html/js进行操作，但是对于您所做的一切，请查看一些示例代码，因为几乎总是有一个角度的选择。

我已经做了很多研究，为了解决一个不同的问题，我在这里的另一篇文章中找到了解决方案的一部分：

---

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

我认为AngularJS没有太多关于表单提交的内容，因为它更多地依赖于“双向数据绑定”。在传统的html开发中，数据绑定是单向的，即一旦DOM呈现，对DOM元素所做的任何更改都不会反映在JS对象中，但在AngularJS中，它是双向的。因此，实际上没有必要形成提交。我已经使用AngularJS完成了一个中型应用程序，无需提交表单。如果您热衷于提交表单，您可以编写一个用于包装表单的指令，该指令处理ENTER键下键和submit按钮单击事件，并调用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;
                    });
            }

$scope.submit_form=函数（）
{
$http({
url:“http://localhost/services/test.php",
方法：“张贴”，
标题：{'Content-Type'：'application/x-www-form-urlencoded'}，
数据：$.param（$scope.formdata）
}).success（函数（数据、状态、标题、配置）{
$scope.status=状态；
}).error（函数（数据、状态、标题、配置）{
$scope.status=状态；
});
}

var-app=angular.module（“myApp”，[]）；
app.controller（“myCtrl”、[“$scope”、函数（$scope）{
$scope.submit\u form=函数（formData）{
$scope.formData=formData；
console.log（formData）；//对象
console.log（JSON.stringify（formData））；//字符串
$scope.form={}；//清除ng模型表单
}
}] );

名字：

姓氏：



名字：{form.Firstname}

Lastname:{{form.Lastname}}

提交表单：{{formData}}
这太棒了。谢谢如果我可以问一下，你省略文本区域有什么特别的原因吗？我认为图像上传更复杂，对吗？从我在网上看到的情况来看，很多人建议将jQuery与ng-js结合使用。啊，不，我错漏了文本区域。是的，对于图像上传，您需要使用ng上传，我以前从未使用过它，但在SO上有一篇很好的帖子：.Jquery和Angular以非常不同的方式做类似的事情。在您绝对需要的时候使用它（例如，我使用的是HighCharts.js图表库，它依赖于JQ，并且没有很多其他可用的图形解决方案）。如果你习惯于在JQ中进行开发，那么在不得不求助于JQ之前，试着先找到有角度的方法来做事情
<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>

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