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() 判断给定对象是否为数字，如果是返回trueangular.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>