小编典典

AngularJS-简单的表单提交

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>

我的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. 我在jQuery中使用Angular提交图像时发现了很多信息,我发现提交中已经有图像对象,如何检索该数据?图像包含哪些注意事项?

我愿意接受任何清晰简洁的信息,并为每个人树立一个良好的学习榜样。

我的小提琴


阅读 212

收藏
2020-07-04

共1个答案

小编典典

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

2020-07-04