Angularjs基础(七)
AngularJS表单
AngularJS表单时输入控件的集合
HTML控件
一下HTML input 元素被称为HTML 控件:
input 元素
select元素
button元素
textarea元素
HTML 表单
AngularjS表单上实例
<div ng-app="myApp" ng-controller="formCtrl">
<from novalidate>
First Name:
<input type="text" ng-model="user.firstName">
Last Name:
<input type="text" ng-model="user.lastName">
<button ng-click="reset()">RESET</button>
</from>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>
<sctipt>
var app = angular.module('myApp'm[]);
app.controller('formCtrl',function($scope){
$scope.master = {firstName:"John",lastName:"Doe"};
$scope.reset = function(){
$scope.user = angular.copy($scope.master);
};
$scope.reset();
})
novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。
</sctipt>
实例解析
ng-app 指令定义了AngularJS 应用。
ng-controller指令定义了应用控制器。
ng-model 指令绑定了两个inputh 元素到模型的user 对象。
formCtrl 函数设置了mater 对象的初始值,并定义了reset()方法。
reset() 方法设置了user 对象等于master对象。
ng-click 指令调用了reset()方法,且在点击按钮时调用。
novalidate 属性在应用中不是必须的,但是你需要在 AngularJS 表单中使用,用于重写标准的 HTML5 验证。
AngularJS输入验证
AngularJS表单和控件可以验证输入的数据。
输入验证
AngularJS表单和控件可以提供验证功能,并对用户输入的非法数据惊醒警告。
应用代码
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
<p>用户名:</p>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
<p>
<input type="subimt" ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.eail.$invalid">
</p>
</form>
<sctrpt>
var app = angular.module('myApp',[]);
app.controller('validateCtrl',function($scope){
$scope. user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
})
</script>
实例解析
AngularJS ng-model 指令用于绑定输入元素到模型中。
模型对象有两个属性: user 和email
我们使用了ng-show指令,color:red 在邮件是$dirty 或$invalid才显示
属性:
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录
AngularJS API
AngularJS 全局API
AngularJS 全局API 用于执行常见任务的JavaScript 函数集合,
比较对象
迭代对象
转换对象
全局 API 函数使用 angular 对象进行访问。
以下列出了一些通用的 API 函数:
angular.lowercase() 转换字符床为小写
angular.uppercase() 转换字符串为大写
angular.isString() 判断给定的对象是否为字符串,如果是返回true.
angular.isNumber() 判断给定对象是否为数字,如果是返回true
angular.lowercase()
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{x1}}</p>
<p>{{x2}}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.x1 = “JOHN”;
$scope.x2 =angular.lowercase($scope.x1)
});
</script>
angular.uppercase()
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{x1}}</p>
<p>{{x2}}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.x1 ="John";
$scope.x2 = angular.uppercase($scope.x1);
})
</script>
angular.isString()
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{x1}}</p>
<p>{{x2}}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.x1 = "JSON";
$scope.x2 = angular.isString($scope.x1);
});
</script>
angular.isNumber()
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{x1}}</p>
<p>{{x2}}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.x1 = "JOHN"l
$scope.x2 = angular.isNumber($scope.x1);
});
</script>
Angularjs基础(七)的更多相关文章
- AngularJS基础入门初探
一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...
- Bootstrap <基础七>按钮
任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a>, <butto ...
- C#_02.16_基础七_.NET表达式&运算符
C#_02.16_基础七_.NET表达式&运算符 一.字面量: 字面量和变量的关系来理解字面量会比较简单: 因此字面量是源代码中键入已知的(我们知道它是多少的)值.也可以理解是等号右边的非创建 ...
- {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)
Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...
- Java基础七-正则表达式
Java基础七-正则表达式 一.定义: 特定的符号的组合 二.作用: 用于操作字符串数据 三.优缺点 简化代码,但是阅读性差 四.引入 4.1 问题 判断一个号码是否是QQ号? 不是零开头 6-15位 ...
- day 72 Django基础七之Ajax
Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 六 同源策略与 ...
- day 60 Django基础七之Ajax
Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 六 同源策 ...
- {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)
{Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) Django基础七之 ...
- Django基础七之CBV装饰器和中间件
Django基础七之CBV装饰器和中间件 目录 Django基础七之CBV装饰器和中间件 1. CBV加装饰器 2. Django中间件 2.1 Django中间件介绍 2.2 自定义中间件 2.2. ...
随机推荐
- java项目升级spring4.3.x 、jdk1.8 、tomcat8.5遇到的坑及解决方案
在将spring3.x 升级为4.3.x,jdk1.7 tomcat7升级到jdk1.8.tomcat8.5过程中,碰到了很多问题,也学习到了很多东西,现将这些问题分享出来,方便大家后续遇到同样问题时 ...
- hdu 3255 体积并
http://www.cnblogs.com/kane0526/archive/2013/03/07/2948446.html http://blog.csdn.net/acdreamers/arti ...
- Ubuntu真机安装
Ubuntu真机安装 1.Ubuntu安装: (1)启动盘制作: a.下载启动盘制作工具Universal USB Installe,下载地址: b.下载Ubuntu系统镜像,到本地磁盘,官方下载地址 ...
- Format - Numeric
1. 一些常用格式,参考链接:http://msdn.microsoft.com/en-us/library/0c899ak8(v=vs.110).aspx ; Console.WriteLine(v ...
- Selenium2学习(二)-- 操作浏览器基本方法
前面已经把环境搭建好了,这从这篇开始,正式学习selenium的webdriver框架.我们平常说的 selenium自动化,其实它并不是类似于QTP之类的有GUI界面的可视化工具,我们要学的是web ...
- day3-基础 列表,元组,字典,模块
1.列表 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 定义列表 Country = ['China','England','America'] 通过下标访问列 ...
- 元素float以后,div高度无法自适应解决方案
首先要明白 >> 浮动的子元素会脱离文档流,不再占据父元素的空间,父元素也就没有了高度. 解决方案:1 给父元素加上overflow:hidden;属性就行了. 第一种:(给父级加over ...
- scrum和团队合作
一. 队名及宣言 队名 the better for you 宣言Change our lives with code 二. 队员及分工 a.承担软件工程的角色 姓名 学号 角色 张美庆 B20150 ...
- Error: Error SSL Required Code: 403
Error: Error SSL Required Code: 403 Error Message If the 'services' Web directory for ArcGIS is set ...
- 面向对象编程(OOP)、面向组件编程(COP)、面向方面编程(AOP)和面向服务编程(SOP)
http://blog.csdn.net/hjf19790118/article/details/6919265 1.什么是面向对象编程(Object-Oriented Programming)? 面 ...