浅谈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 相关文章推荐
javascript下给元素添加事件的方法与代码
Aug 13 Javascript
jQuery 方法大全方便学习参考
Feb 25 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
二叉树先序遍历的非递归算法具体实现
Jan 09 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 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/03/29 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
jQuery中的常用事件总结
2009/12/27 Javascript
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
jquery实现拖动效果
2016/08/10 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
python清除字符串里非数字字符的方法
2015/07/02 Python
对python 命令的-u参数详解
2018/12/03 Python
python常用函数与用法示例
2019/07/02 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
Python logging设置和logger解析
2019/08/28 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
Python tornado上传文件的功能
2020/03/26 Python
文员自我评价怎么写
2013/09/19 职场文书
个人向公司借款协议书
2014/10/09 职场文书
2014年残联工作总结
2014/11/21 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书