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


Posted in Javascript onSeptember 30, 2018

在表单提交的时候,我使用了一个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);
 		};
 	})

点击提交后的结果:

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

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

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

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

因为只要将

<button>提交</button>

改成

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

之后

点击按钮没有任何反应。

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

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

Javascript 相关文章推荐
jquery 最简单易用的表单验证插件
Feb 27 Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
JS中的函数与对象的创建方式
May 12 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 Javascript
小程序实现点击tab切换左右滑动
Nov 16 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 21 Javascript
angularJs中$scope数据序列化的实例
Sep 30 #Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 #Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 #Javascript
mpvue将vue项目转换为小程序
Sep 30 #Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 #Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 #Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 #Javascript
You might like
php下载文件的代码示例
2012/06/29 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
下载糗事百科的内容_python版
2008/12/07 Python
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
Python中用于返回绝对值的abs()方法
2015/05/14 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
对pytorch的函数中的group参数的作用介绍
2020/02/18 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
中国旅游网站:同程旅游
2016/09/11 全球购物
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
采购主管的岗位职责
2013/12/17 职场文书
四年级数学教学反思
2014/02/02 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android