Angularjs基础(七)

AngularJS表单
　　　　AngularJS表单时输入控件的集合
HTML控件
　　　　一下HTML input 元素被称为HTML 控件：
　　　　　　　　input 元素
　　　　　　　　select元素
　　　　　　　　button元素
　　　　　　　　textarea元素

HTML 表单
　　　　AngularjS表单上实例
　　　　　　

　　　　　　　　　
　　　　　　　　　　First Name:
　　　　　　　　　 　　　　　　　　　　Last Name:
　　　　　　　　　 　　　　　　　　　　　　
　　　　　　　　
　　　　　　　　

form = {{user}}

　　　　　　　　

master = {{master}}

　　　　　　

　　

　　　　　　
　　　　　　　　　　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 中新增的。禁用了使用浏览器的默认验证。
　　　　　　

　　　　　　实例解析
　　　　　　　　　　ng-app 指令定义了AngularJS 应用。
　　　　　　　　　　ng-controller指令定义了应用控制器。
　　　　　　　　　　ng-model 指令绑定了两个inputh 元素到模型的user 对象。
　　　　　　　　　　formCtrl 函数设置了mater 对象的初始值，并定义了reset()方法。
　　　　　　　　　　reset() 方法设置了user 对象等于master对象。
　　　　　　　　　　ng-click 指令调用了reset()方法,且在点击按钮时调用。
　　　　　　　　　　novalidate 属性在应用中不是必须的，但是你需要在 AngularJS 表单中使用，用于重写标准的 HTML5 验证。

AngularJS输入验证
　　　　AngularJS表单和控件可以验证输入的数据。

输入验证
　　　　AngularJS表单和控件可以提供验证功能，并对用户输入的非法数据惊醒警告。

应用代码
　　　　

　　　　　　

用户名：

　　　　　　
　　　　　　 　　　　　　
　　　　　　

　　　　　　 　　　　　　

　　　　

　　　　
　　　　　　var app = angular.module('myApp',[]);
　　　　　　app.controller('validateCtrl',function($scope){
　　　　　　　　$scope. user = 'John Doe';
　　　　　　　　$scope.email = '[e-mail]';
　　　　　　})
　　　　

实例解析
　　　　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()
　　　　　　

　　　　　　　　

{{x1}}

　　　　　　　　

{{x2}}

　　　　　　

　　　　　　

angular.uppercase()
　　　　

　　　　　　

{{x1}}

　　　　　　

{{x2}}

　　　　

　　　　

angular.isString()
　　　　　　

　　　　　　　　

{{x1}}

　　　　　　　　

{{x2}}

　　　　　　

　　　　　　

angular.isNumber()
　　　　　　

　　　　　　　　　　

{{x1}}

　　　　　　　　　　

{{x2}}