浅谈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 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
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发电子邮件
2006/10/09 PHP
php中使用redis队列操作实例代码
2013/02/07 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
javascript取消文本选定的实现代码
2010/11/14 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
7个JS基础知识总结
2014/03/05 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python Django简单实现session登录注销过程详解
2019/08/06 Python
python实现网页录音效果
2020/10/26 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
提高EJB性能都有哪些技巧
2012/03/25 面试题
高中自我鉴定范文
2013/11/03 职场文书
公司任命书范本
2014/06/04 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
民事申诉状范本
2015/05/20 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
创业计划书之美甲店
2019/09/20 职场文书
Python图像处理之图像拼接
2021/04/28 Python
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers
Python Pandas解析读写 CSV 文件
2022/04/11 Python