浅谈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 写的简单进度条控件
Jan 22 Javascript
jquery last-child 列表最后一项的样式
Jan 22 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
extJS中常用的4种Ajax异步提交方式
Mar 07 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
浅析java线程中断的办法
Jul 29 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
javscript 数组扁平化的实现
Feb 03 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 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+jQuery 注册模块开发详解
2014/10/14 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
Python下的subprocess模块的入门指引
2015/04/16 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
python logging 日志的级别调整方式
2020/02/21 Python
应届毕业生简历自我评价
2014/01/31 职场文书
大学生军训感想
2014/02/16 职场文书
小学生元旦感言
2014/02/26 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
药品营销策划方案
2014/06/15 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
python glom模块的使用简介
2021/04/13 Python