Angularjs - 簡單表格提交

php javascript angularjs forms

2022-08-30 09:22:02

我正在与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 应用代码...

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文件中的数组）？
当复选框为真时，如何提交复选框的值？
我发现很多关于使用jQuery和Angular提交图像的信息，我看到这个提交中已经有一个图像对象，，我该如何检索该数据？图像应包含哪些注意事项？

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

我的小提琴

答案 1

警告这是针对 Angular 1.x 的

如果您正在寻找Angular（v2 +，当前版本8），请尝试此答案或官方指南。

原始答案

我在这里重写了你的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-controllerng-modelng-submit

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

~~有关角度表单提交的一般建议，请参阅说明书示例~~

更新食谱不见了。相反，请查看表单提交的 1.x 指南

Angular的食谱有很多示例代码，这将有所帮助，因为文档不是很用户友好。

Angularjs改变了你的整个Web开发过程，不要尝试以你习惯的方式使用JQuery或常规html / js来做事，但是对于你所做的一切，请四处寻找一些示例代码，因为几乎总是有一个有角度的替代方案。

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

Angularjs - 簡單表格提交

警告 这是针对 Angular 1.x 的

原始答案

警告这是针对 Angular 1.x 的