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

 更新时间:2018年09月30日 16:10:11   作者:狗子life  
今天小编就为大家分享一篇浅谈angular表单提交中ng-submit的默认使用方法。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

在表单提交的时候,我使用了一个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的默认使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 初识angular框架后的所思所想

    初识angular框架后的所思所想

    这篇文章主要介绍了初识angular框架后的所思所想,学习认识angular后的一些个人问题总结,需要的朋友可以参考下
    2016-02-02
  • Angular CLI 安装和使用教程

    Angular CLI 安装和使用教程

    本篇文章主要介绍了Angular CLI 安装和使用教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • AngularJS中scope的绑定策略实例分析

    AngularJS中scope的绑定策略实例分析

    这篇文章主要介绍了AngularJS中scope的绑定策略,结合实例形式简单分析了AngularJS scope的三种绑定模式的使用方法与相关注意事项,需要的朋友可以参考下
    2017-10-10
  • AngularJS入门教程之MVC架构实例分析

    AngularJS入门教程之MVC架构实例分析

    这篇文章主要介绍了AngularJS的MVC架构,结合实例形式重点分析了ng-controller声明并使用控制器的操作技巧与控制器作用域的相关注意事项,需要的朋友可以参考下
    2016-11-11
  • AugularJS从入门到实践(必看篇)

    AugularJS从入门到实践(必看篇)

    下面小编就为大家带来一篇AugularJS从入门到实践(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 详解angularjs 学习之 scope作用域

    详解angularjs 学习之 scope作用域

    本篇文章主要介绍了详解angularjs 学习之 scope作用域,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • AngularJS中的按需加载ocLazyLoad示例

    AngularJS中的按需加载ocLazyLoad示例

    本篇文章主要介绍了AngularJS中的按需加载ocLazyLoad,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-01-01
  • Angularjs 动态改变title标题(兼容ios)

    Angularjs 动态改变title标题(兼容ios)

    这篇文章主要介绍了 Angularjs 动态改变title标题(兼容ios)的相关资料,需要的朋友可以参考下
    2016-12-12
  • angular学习之动态创建表单的方法

    angular学习之动态创建表单的方法

    这篇文章主要介绍了angular学习之动态创建表单的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 剖析Angular Component的源码示例

    剖析Angular Component的源码示例

    本篇文章主要介绍了剖析Angular Component的源码示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03

最新评论