Question

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

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

我的fiddle。

有没有人有任何关于提交简单，无污染的表格的好例子，这些表格可以帮助我和许多其他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>

我的应用代码...

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

 });

我想我从这里得到的三个问题是......

我的php文件应该如何与此交互（如何将json字符串转换为php文件中的数组）？
当复选框为true时，如何提交复选框的值？
我发现很多信息abotu使用jQuery和Angular提交图片，我看到这个提交中已经有了一个图像对象，我该如何检索这些数据？图像中包含哪些注意事项？

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

我的fiddle

Answer 1

警告这适用于Angular 1.x

如果您正在寻找Angular（v2 +，当前版本为8），请尝试使用此answer或official guide。

原始答案

我在这里改写了你的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，所以你必须在本地运行它。

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

更新食谱消失了。相反，请查看form submission

的1.x指南

angular的cookbook有很多示例代码，因为文档不是非常用户友好，所以会有所帮助。

Angularjs改变了整个Web开发过程，不要尝试按照习惯使用JQuery或常规html / js的方式，但是对于你所做的一切都需要查看一些示例代码，因为几乎总是如此一个有角度的选择。

Answer 2

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

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

Answer 3

我一直在进行相当多的研究，并尝试解决另一个问题，最后我在其他帖子中找到了解决方案的很大一部分：

Angularjs - Form Post Data Not Posted?

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

Answer 4

我认为AngularJS之所以没有对表单提交说多少，是因为它更多地依赖于“双向数据绑定”。在传统的html开发中，你有一种方式的数据绑定，即一旦DOM呈现你对DOM元素所做的任何更改都没有反映在JS对象中，但是在AngularJS中它可以双向工作。因此，实际上没有必要提交提交。我使用AngularJS完成了一个中等大小的应用程序而无需表单提交。如果您热衷于提交表单，您可以编写一个包含表单的指令，该指令处理ENTER keydown和SUBMIT按钮单击事件并调用form.submit（）。

如果您需要此类指令的示例源代码，请通过评论告诉我。我发现这是一个简单的指令，你可以自己写。

Answer 5

var app = angular.module( "myApp", [] );

app.controller( "myCtrl", ["$scope", function($scope) {

    $scope.submit_form = function(formData) {

        $scope.formData = formData;

        console.log(formData); // object
        console.log(JSON.stringify(formData)); // string

        $scope.form = {}; // clear ng-model form

    }

}] );

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

    <form ng-submit="submit_form(form)" >

        Firstname: <input type="text" ng-model="form.firstname" /><br />
        Lastname: <input type="text" ng-model="form.lastname" /><br />

        <hr />

        <input type="submit" value="Submit" />

    </form>

    <hr />          

    <p>Firstname: {{ form.firstname }}</p>
    <p>Lastname: {{ form.lastname }}</p>

    <pre>Submit Form: {{ formData }} </pre>

</div>

Codepen

Angularjs - 简单表单提交

5 个答案:

警告这适用于Angular 1.x

原始答案