Angularjs学习笔记5_form1
1.入门
<form ng-controller="validationController" name="form1" novalidate>
<p> <input type="submit" ng-disabled="form1.$invalid">
<input type="email" name="myemail" ng-model="email" ng-minlength="10" ng-maxlength="50" required>
// 使用了 ng-show指令， color:red 在邮件是 $dirty 或 $invalid 才显示。
<span style="color:red" ng-show="form1.myemail.$dirty && form1.myemail.$invalid">
</span>
</p>
</form>
2.使用angular-messages
<!DOCTYPE html><html>
<head>
<title>Form</title>
<script type='text/javascript' src='http://cdn.bootcss.com/angular.js/1.4.9/angular.js'></script>
<script type='text/javascript' src='http://cdn.bootcss.com/angular.js/1.4.9/angular-messages.js'></script>
<style type="text/css">
.form1 {
transition:all linear 0.5s;
background: transparent;
}
</style>
</head>
<body ng-app="a8_8">
<form name="form1" ng-controller="form1Controller" class="form1" novalidate> <label ng-show="user.id != undefined" ng-model="user.id">
user id:<span>{{user.id}}</span>
</label><br>
<label>Enter text: <input type="email" ng-model="email1" name="myemail" required ng-minlength="10" maxlength="15" /> </label>
<div style="color:red" ng-messages="form1.myemail.$error" ng-messages-multiple role="alert" ng-if="form1.myemail.$touched">
<div ng-message="required">Email is required.</div>
<div ng-message="email">Invalid email address.</div>
<div ng-message="minlength">min length 10.</div>
<div ng-message="maxlength">max length 50.</div>
</div> <p> <input type="submit" value="提交" ng-disabled="form1.$invalid" /></p>
<span class="error" ng-show="form1.myemail.$error.required">Required!</span><br>
<code>form1.myemail.$valid = {{form1.myemail.$valid}}</code><br>
<code>form1.myemail.$error = {{form1.myemail.$error}}</code><br>
<code>form1.$valid = {{form1.$valid}}</code><br>
<code>form1.$error.required = {{!!form1.$error.required}}</code><br>
<button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button>
<button ng-click="update(user)" ng-disabled="form1.$invalid || isUnchanged(user)">SAVE</button> <br>
</body>
</html>
3.数据提交
已经不用传统的submit，是基于model 的后台处理
<script type="text/javascript">
var app = angular.module('a8_8', ['ngMessages']);
app.controller('form1Controller', ['$scope',function($scope) {
$scope.user = {email:'sweet_dreams@aliyun.com'};
$scope.master = {email:'sweet_dreams@aliyun.com'};
$scope.update = function(user) {
if($scope.form1.$valid){
alert('通过验证可以提交表单');
$scope.master = angular.copy(user);
console.log( 'save'+user);
user.id=1;
console.log( user);
}else{
alert('表单没有通过验证');
}
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.isUnchanged = function(user) {
return angular.equals(user, $scope.master);
};
}]);
</script>
Angularjs学习笔记5_form1的更多相关文章
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--Guide教程系列文章索引
在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
随机推荐
- Fiddler 高级用法：Fiddler Script 与 HTTP 断点调试
转载自 https://my.oschina.net/leejun2005/blog/399108 1.Fiddler Script 1.1 Fiddler Script简介 在web前端开发的过程中 ...
- 【Floyd】【Dilworth定理】【最小路径覆盖】【匈牙利算法】bzoj1143 [CTSC2008]祭祀river
Dilworth定理,将最长反链转化为最小链覆盖.//貌似还能把最长上升子序列转化为不上升子序列的个数? floyd传递闭包,将可以重叠的最小链覆盖转化成不可重叠的最小路径覆盖.(引用:这样其实就是相 ...
- Scala实战高手****第15课：Scala类型参数编程实战及Spark源码鉴赏
1.Scala的类和方法.函数都可以是泛型 2.上界:表示泛型的类型必须是某种类型或者其类型的子类,语法:<: ,对类型进行限定 3.下界:表示泛型的类型必须是某种类型或者其类型的父类,语法:& ...
- yum出现的“UnicodeDecodeError: 'ascii' codec”问题解决
新装了CentOS 6.5系统,打算使用yum安装程序是出现了如下错误: Loading mirror speeds from cached hostfile Traceback (most rece ...
- iOS 调H5方法不执行没反应的坑
调用H5的方法需要给H5传一些参数,参数中包括图片的base64字符串. 错误一: 图片转base64,后面参数不能随便写,正确做法如下 NSData *imageData = UIImageJPEG ...
- 【JVM】调优笔记2-----JVM在JDK1.8以后的新特性以及VisualVM的安装使用
一.JVM在新版本的改进更新以及相关知识 1.JVM在新版本的改进更新 图中可以看到运行时常量池是放在方法区的 1.1对比: JDK 1.7 及以往的 JDK 版本中,Java 类信息.常量池.静态变 ...
- 搭建redis集群环境
Redis的集群机制 ============================= 转自http://lib.csdn.net/article/redis/39999 别人写的,写得不错,转了. Red ...
- [Android 4.4.4] 泛泰A850 三版通刷 Mokee4.4.4 KTU84P 20140626 RC2.2 by syhost
RC2.1版地址: http://blog.csdn.net/syhost/article/details/34051923 2014.06.26 RC2.2 更新内容: 1 修复相机录像无声的bug ...
- nagios系列教程地址
http://www.sosidc.com/sort/10/page/3 http://www.sosidc.com/sort/10/page/2 http://www.sosidc.com/sort ...
- 深度增强学习--Policy Gradient
前面都是value based的方法,现在看一种直接预测动作的方法 Policy Based Policy Gradient 一个介绍 karpathy的博客 一个推导 下面的例子实现的REINFOR ...