浅谈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 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 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 !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
解析PHP中一些可能会被忽略的问题
2013/06/21 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
深入理解javascript变量声明
2014/11/20 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
Python单链表的简单实现方法
2014/09/23 Python
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
几个Linux面试题笔试题
2012/12/01 面试题
法院实习人员自我鉴定
2013/09/26 职场文书
施工材料员岗位职责
2014/02/12 职场文书
主管竞聘书范文
2014/03/31 职场文书
合伙经营协议书范本
2014/04/18 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
2015年数学教研工作总结
2015/07/22 职场文书