当前位置: 首页 > 面试题库 >

AngularJS-简单的表单提交

徐麒
2023-03-14
问题内容

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

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

我的小提琴


问题答案:

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



 类似资料:
  • 本文向大家介绍AngularJS中的表单简单入门,包括了AngularJS中的表单简单入门的使用技巧和注意事项,需要的朋友参考一下 AngularJS 表单 AngularJS 表单是输入控件的集合。 HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 HTML 表单 HTML 表单通常与 HT

  • 本文向大家介绍angularJS提交表单(form),包括了angularJS提交表单(form)的使用技巧和注意事项,需要的朋友参考一下 代码很简单,就不多废话了,直接奉上代码: 这里给大家分享的是最基础的angularJS表单验证,希望大家能够喜欢。

  • 问题内容: 在这种特殊情况下,按Enter键时必须使这些输入调用函数的选项是什么? 问题答案: Angular开箱即用。您是否在表单元素上尝试了ngSubmit? 编辑:根据有关提交按钮的注释,该解决方案包括: 如果您不喜欢隐藏的提交按钮解决方案,则需要将控制器功能绑定到Enter keypress或keyup事件。这通常需要一个自定义指令,但是AngularUI库已经设置了一个不错的按键解决方案

  • 在这种特殊情况下,当我按Enter键时,我必须使用哪些选项使这些输入调用函数? Html:

  • 问题内容: 最近,到目前为止,我已经跳入angularjs及其精彩。我一直在通过$ http服务发送AJAX请求。今天,我震惊地发现没有简单的方法可以做到(据我所知)。通过谷歌和SO进行搜索使我无所适从复杂的复杂解决方案。 尽管我现在最终使用了JQuery,但对于像JQuery ajax这样能够发送表单的东西是否真的可用感到好奇。这是简单的JQuery代码,用于说明正在讨论的内容 问题答案: 有一

  • 问题内容: 感谢balexandre和rtiq,我的工作流程已经全部解决。我的.ashx文件正在被调用,所以我知道部分代码正在运行,并且警告我错误。当我跟踪.NET时,通过context.Request[“ email”]和context.Request [“ optin”]引入的变量为NULL。 我知道有什么问题,但看不到。我重新编辑了这篇文章,以获取最新的代码。 HEAD中的jQuery HT