浅谈angular表单提交中ng-submit的默认使用方法

在表单提交的时候，我使用了一个button，但ng-submit写在form标签中，然而button中我未使用任何方法访问submit（）函数

<div ng-app="dkr">
	 <div ng-controller="logincontrol">
	 <form ng-submit="submit(user)">
	 	<div>账号名 <input type="text" ng-model="user.username"/></div>
	 	<div>密码 <input type="text" ng-model="user.password"></div>
	 	<button type="submit">提交</button>
	 	<div ng-show="success.length>0">{{success}}</div>
	 	<div ng-show="error.length>0">{{error}}</div>
	 </form>
	 </div>

<code class="language-html"></div></code>

	angular.module("dkr",[])
	.controller("logincontrol",function($scope){
 		$scope.user={username:'',password:''};
 		$scope.success="";
 		$scope.error="";
 		$scope.submit=function(u){
 			if($scope.user.username=="admin"&&$scope.user.password=="123"){
 				$scope.success="success";
 				$scope.error="";
 			}
 			else{
 				$scope.success="";
 				$scope.error="error";
 			}
 			console.log(u);
 		};
 	})

点击提交后的结果：

如上所示，返回结果以及控制台打印完全正确。

然而我对提交这个button未做任何处理

然后经过测试，我发现button的默认type为submit。

因为只要将

<button>提交</button>

改成

<button type="button">提交</button>

之后

点击按钮没有任何反应。

因此在form表单提交的时候一定要注意button标签的默认使用。

以上这篇浅谈angular表单提交中ng-submit的默认使用方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS表单提交实例详解

    本文实例讲述了AngularJS表单提交.分享给大家供大家参考,具体如下: AngularJS中的数据绑定 AngularJS创建实时模板来代替视图,而不是将数据合并进模板之后更新DOM.任何一个独立视图组件中的值都是动态替换的. ng-app属性声明所有被其包含的内容都属于这个AngularJS应用,这也是我们可以在Web应用中嵌套AngularJS应用的原因.只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS影响. 当AngularJS认为某个值可能发生变化时,它会运行

  • angular实现表单验证及提交功能

    本例通过Angular框架来实现简单的表单验证 一.html结构 1.借助于bootstrap快速的编写了一个简单的表单 代码主要部分如下: <div class="container" style="margin-top: 30px;" ng-controller="myCtrl"> <h1 style="text-align: center">用户表单提交</h1> <form a

  • angularJS提交表单（form）

    代码很简单,就不多废话了,直接奉上代码: 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <script src="http://localhost:81/js/jquery.js"> </script> <scrip

  • Angular的事件和表单详解

    Angular的事件和表单详解

    前面的文章说道了click事件,与其类似的mouseover以及mousemove等等.下面看看selected.change.copy等运用在表单的事件吧. selected <div ng-controller="Aaa"> <input type="checkbox" ng-model="aaa" value="{{aaa}}"> <select> <option>1111

  • 详细分析使用AngularJS编程中提交表单的方式

    详细分析使用AngularJS编程中提交表单的方式

    在AngularJS出现之前,很多开发者就面对了表单提交这一问题.由于提交表单的方式繁杂而不同,很容易令人疯掉--然而现在看来,依然会让人疯掉. 今天,我们会看一下过去使用PHP方式提交的表单,现在如何将其转换为使用Angular提交.使用Angular来处理表单,对我而言,是一个"啊哈"时刻(译者:表示了解或发现某事物的喜悦).即使它甚至都没有涉及多少Angular表层的东西,但是它却帮助用户看到表单提交之后的潜力,并且理解两种数据绑定方式. 我们会使用jQuery平台来进行这个处理

  • angularjs $http实现form表单提交示例

    需求:请求第三方后台接口返回一段html字符串如下,由前端去实现form表单的POST提交, 说明:form表单submit()实现自动提交input标签hidden,注意script代码中的document.redirect.submit(); <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head

  • AngularJS基础 ng-submit 指令简单示例

    AngularJS ng-submit 指令 AngularJS 实例 表单提交后执行函数: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> &l

  • 浅谈angular表单提交中ng-submit的默认使用方法

    在表单提交的时候,我使用了一个button,但ng-submit写在form标签中,然而button中我未使用任何方法访问submit()函数 <div ng-app="dkr"> <div ng-controller="logincontrol"> <form ng-submit="submit(user)"> <div>账号名 <input type="text" ng

  • 浅谈PHP表单提交(POST&GET&URL编/解码)

    POST方法不依赖于URL,不会将传递的参数值显示在地址栏中.另外,POST方法可以没有限制地传递数据到服务器,所有提交的信息在后台传输,用户在浏览器是看不到这一过程的,安全性高. POST方法比较适合用于发送一个保密的或者大量的数据到服务器. GET方法是<form>表单中method属性的默认方法.使用GET方法提交的表单数据被附加到URL上,并作为URL的一部分发送到服务器端. 注意:若要使用GET方法发送表单,URL的长度应限制在1MB字符以内.如果发送的数据量太大,数据将被截断,从而

  • 浅谈layui 表单元素的选中问题

    layui对表单元素都作了美化,比如下拉列表,单选框,多选框.对表单美化后相应元素的操作,其实是在layui处理过后的div上操作,不能真的反映在原始我们编写的表单的元素上.这也会出现一个问题,如果想用JS对表单做些预处理,怎么做?操作原始的元素并不会展现在layui处理过的表单中的,那我们就对layui处理过的表单动手 这里要提两个我用过的,一个是单选框,一个是下拉列表 * 单选框,layui美化后,对应的type=radio的input项隐藏,在input之后追加了一个div,里面用i标签美

  • php实现过滤表单提交中html标签的方法

    本文实例讲述了php实现过滤表单提交中html标签的方法.分享给大家供大家参考.具体实现方法如下: 有时候我们做的简单评论功能会发现有提交很多的html标签,这些标签会导致页面有一些外连的情况,下面我们一起来看在php中过滤表单提交的html标签方法. 近评论中有一些机器人提交的post链接,都是一些垃圾评论.为了减少这种无谓的链接内容出现,其实是可以用php来删除表单POST提交的html标签,这样机器提交的信息也不会得到他们要的结果.而且可以减少来自seo/seo.html" target=

  • php 表单提交大量数据发生丢失的解决方法

    php 表单提交大量数据发生丢失的解决方法

    最近在项目中,出现一个奇怪的现象,有一个大form里面有上千个input,提交的时候,老是发现post过来的数据不完整,一开始还怀疑是html 表单名称有冲突,排除掉了.然后,网上找了一堆,php.ini 的post_max_size和upload_max_filesize都设置了很大的值,没用,nginx的client_max_body_size 500m;加到了那么大的值,也没用.最后终于google到办法:原来PHP从5.3.9开始增加一个变量 max_input_vars 用来限制提交的

  • 几种设置表单元素中文本输入框不可编辑的方法总结

    代码: 复制代码 代码如下: <input type="text" value="fisker" onclick="alert(this.value);" onfocus="this.blur()" /> 输入框无法获得焦点,不能编辑 表单可以获得值. 可以复制. 蛮奇怪的,都选住了,还没有获得焦点? 2,readonly 代码: <input type="text" value=&quo

  • 浅谈Angular中ngModel的$render

    浅谈Angular中ngModel的$render

    在我开始着手ngModel的领域时候,有一个问题很令我纠结,那就是$render()到底是做什么的呢?查了很多资料都只是简单的描述一下,这就令我很纠结了,终于在一个阳光明媚的晚上,我终于解决了这个大问题 那么这个$render方法到底是干什么的呢?他的用处就是在$viewValue改变的时候可以重新绑定model数据,但是我们要注意一点($viewValue和DOM节点的value是不同的),我觉得他们的区别有点类似setTimeout和$timeout的区别,但是又不太一样.ps:其实mode

  • mvc中form表单提交的三种方式(推荐)

    第一种方式:submit 按钮 提交 <form action="MyDemand" method="post"> <span>关键字:</span> <input name="keywords" type="text" value="@keywords" /> <input type="submit" value="搜索&

  • Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作

    Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作

    本教程基于Laravel 5.4 开始之前首先准备好开发环境,我们假设你已经安装好 Laravel,至于 Vue 的引入,请参考官方文档. 做好上述准备工作后就可以开始我们的开发了,本教程中我们将演示文章发布页面的表单 验证 . 首先在 routes/web.php 中新增两条路由规则: Route::get('post/create', 'PostController@create'); Route::post('post/save', 'PostController@save'); 然后在项

  • SpringMVC中使用bean来接收form表单提交的参数时的注意点

    这是前辈们对于SpringMVC接收表单数据记录下来的总结经验: SpringMVC接收页面表单参数 springmvc请求参数获取的几种方法 下面是我自己在使用时发现的,前辈们没有记录的细节和注意点: 使用bean来接收form表单提交的参数时,pojo中必须含有默认的(即空的)构造函数,同时,需要设置到bean中的变量必须有setter方法. 注:以下代码均为示例代码,非本人实际运行代码,请自行补充. 例如:我有一个bean类是User,具有变量username和password.同时,表单

随机推荐