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 = '[email protected]';
　　　　　　})
　　　　</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>