【js類庫AngularJs】學習angularJs的指令（包括常見表單驗證，隱藏等功能）
AngularJS誕生於2009年，由Misko Hevery 等人創建，後爲Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最爲核心的 是：MVVM、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入、等等。
參考資料：
angularjs中文網：http://www.apjs.net/
angularjs官網：http://angularjs.org
api參考：http://docs.angularjs.cn/api/ng/directive/form
（之所以列出如上這些鏈接，是因爲本人在學習各類語言的過程中，發現入門以後，通過看官方文檔，反倒會學習的更快，更準確，更系統。）
從jquery轉向angularJs這種雙向綁定的js框架時，最讓人擔憂的是原來處理dom的方式在使用angularJs後，應該怎麼適應呢？
本文列出了比較常見的幾種處理，包括表單驗證，動態設置元素樣式，設置元素顯示隱藏等功能。
1. input[checkbox]雙選框
使用方法：
<input type="checkbox" ng-model="" [name=""] [ng-true-value=""] [ng-false-value=""] [ng-change=""]>
使用實例：
<form name="myForm" ng-controller="ExampleController"> Value1: <input type="checkbox" ng-model="value1"> <br/> Value2: <input type="checkbox" ng-model="value2" ng-true-value="'YES'" ng-false-value="'NO'"> <br/> <tt>value1 = {{value1}}</tt><br/> <tt>value2 = {{value2}}</tt><br/> </form>
js代碼：
var app = angular.module('formExample', []); app.controller('ExampleController', ['$scope', function($scope) { console.log('...'); $scope.value1 = true; $scope.value2 = 'YES' }]);
頁面效果圖：
2.input[date]時間選擇器
使用方法：
<input type="date" ng-model="" [name=""] [min=""] [max=""] [required=""] [ng-required=""] [ng-change=""]>
使用實例：
<form name="dateForm" ng-controller="DateController"> Pick a date in 2015: <input type="date" id="exampleInput" name="input" ng-model="value" placeholder="yyyy-MM-dd" min="2015-01-01" max="2015-12-31" required /> <span class="error" ng-show="dateForm.input.$error.required"> Required!</span> <span class="error" ng-show="dateForm.input.$error.date"> Not a valid date!</span> <tt>value = {{value}}</tt><br/> <tt>value = {{value | date: "yyyy-MM-dd"}}</tt><br/> <tt>dateForm.input.$valid = {{dateForm.input.$valid}}</tt><br/> <tt>dateForm.input.$error = {{dateForm.input.$error}}</tt><br/> <tt>dateForm.$valid = {{dateForm.$valid}}</tt><br/> <tt>dateForm.$error.required = {{!!dateForm.$error.required}}</tt><br/> </form>
js代碼：
function DateController($scope){ $scope.value = new Date(2015, 9, 22); }
效果圖：
3.ng-class 使用angularJs動態設置、更改dom元素的css樣式。
css樣式：
.strike { text-decoration: line-through; } .bold { font-weight: bold; } .red { color: red; }
html代碼：
<p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p> <input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)<br> <input type="checkbox" ng-model="important"> important (apply "bold" class)<br> <input type="checkbox" ng-model="error"> error (apply "red" class) <hr> <p ng-class="style">Using String Syntax</p> <input type="text" ng-model="style" placeholder="Type: bold strike red"> <hr> <p ng-class="[style1, style2, style3]">Using Array Syntax</p> <input ng-model="style1" placeholder="Type: bold, strike or red"><br> <input ng-model="style2" placeholder="Type: bold, strike or red"><br> <input ng-model="style3" placeholder="Type: bold, strike or red"><br>
效果圖：
4.ng-class-odd/even 分別定義奇數偶數元素的css樣式
css樣式：
.odd { color: red; } .even { color: blue; }
html代碼：
<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']"> <li ng-repeat="name in names"> <span ng-class-odd="'odd'" ng-class-even="'even'"> {{name}} </span> </li> </ol>
效果圖：
5.ng-click 單擊事件
<button ng-click="count = count + 1" ng-init="count=0"> Increment </button> <span> count: {{count}} </span>
6.ng-show/hide 是否顯示，或隱藏。angularJs根據這兩個屬性的值，對相應元素增加.ng-hide的樣式
css樣式：
.ng-hide { line-height: 0; opacity: 0; padding: 0 10px; }
html代碼：
<span>Click me: </span><input type="checkbox" ng-model="checked"><br/> <div> Show: <div style="background-color:#ccc" ng-show="checked"> <span> I show up when your checkbox is checked.</span> </div> </div> <div> Hide: <div style="background-color:#258be3;color:white" ng-hide="checked"> <span> I hide when your checkbox is checked.</span> </div> </div>
最後，全部代碼如下，單頁test.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>angularJs directive(指令)</title> <style> body{font:12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif} .strike { text-decoration: line-through; } .bold { font-weight: bold; } .red { color: red; } .odd { color: red; } .even { color: blue; } .ng-hide { line-height: 0; opacity: 0; padding: 0 10px; } </style> <script src="//cdn.bootcss.com/angular.js/1.2.19/angular.js"></script> </head> <body ng-app="formExample"> <h2>AngularJS Sample Application</h2> <div> <h3>input[checkbox]</h3> <form name="myForm" ng-controller="ExampleController"> Value1: <input type="checkbox" ng-model="value1"> <br/> Value2: <input type="checkbox" ng-model="value2" ng-true-value="'YES'" ng-false-value="'NO'"> <br/> <tt>value1 = {{value1}}</tt><br/> <tt>value2 = {{value2}}</tt><br/> </form> </div> <div> <hr> <h3>input[date]</h3> <form name="dateForm" ng-controller="DateController"> Pick a date in 2015: <input type="date" id="exampleInput" name="input" ng-model="value" placeholder="yyyy-MM-dd" min="2015-01-01" max="2015-12-31" required /> <span class="error" ng-show="dateForm.input.$error.required"> Required!</span> <span class="error" ng-show="dateForm.input.$error.date"> Not a valid date!</span> <tt>value = {{value}}</tt><br/> <tt>value = {{value | date: "yyyy-MM-dd"}}</tt><br/> <tt>dateForm.input.$valid = {{dateForm.input.$valid}}</tt><br/> <tt>dateForm.input.$error = {{dateForm.input.$error}}</tt><br/> <tt>dateForm.$valid = {{dateForm.$valid}}</tt><br/> <tt>dateForm.$error.required = {{!!dateForm.$error.required}}</tt><br/> </form> </div> <script> var app = angular.module('formExample', []); app.controller('ExampleController', ['$scope', function($scope) { console.log('...'); $scope.value1 = true; $scope.value2 = 'YES' }]); /* app.controller('DateController', ['$scope', function($scope) { $scope.value = new Date(2015, 9, 22); console.log($scope.value); }]);*/ //上下兩種寫法都可以 function DateController($scope){ $scope.value = new Date(2015, 9, 22); } </script> <div> <hr> <h3>ng-class</h3> <p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p> <input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)<br> <input type="checkbox" ng-model="important"> important (apply "bold" class)<br> <input type="checkbox" ng-model="error"> error (apply "red" class) <hr> <p ng-class="style">Using String Syntax</p> <input type="text" ng-model="style" placeholder="Type: bold strike red"> <hr> <p ng-class="[style1, style2, style3]">Using Array Syntax</p> <input ng-model="style1" placeholder="Type: bold, strike or red"><br> <input ng-model="style2" placeholder="Type: bold, strike or red"><br> <input ng-model="style3" placeholder="Type: bold, strike or red"><br> </div> <div> <hr> <h3>ng-class-odd/even</h3> <ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']"> <li ng-repeat="name in names"> <span ng-class-odd="'odd'" ng-class-even="'even'"> {{name}} </span> </li> </ol> </div> <div><hr> <h3>ng-click</h3> <button ng-click="count = count + 1" ng-init="count=0"> Increment </button> <span> count: {{count}} </span> </div> <div><hr> <h3>ng-show/hide</h3> <span>Click me: </span><input type="checkbox" ng-model="checked"><br/> <div> Show: <div style="background-color:#ccc" ng-show="checked"> <span> I show up when your checkbox is checked.</span> </div> </div> <div> Hide: <div style="background-color:#258be3;color:white" ng-hide="checked"> <span> I hide when your checkbox is checked.</span> </div> </div> </div> <br/> </body> </html>
目前我瞭解到，有不少人使用Angular+ionic開發html5版本的app。
更多細節可以參考網站http://www.ionic.wang/start-index.html
另外，還有免費教程： http://www.ionic.wang/course-index.html
推薦的網站：
http://docs.angularjs.cn/api/ (api文檔)
http://showcase.ngnice.com/#/home/home （常用實例）
http://docs.ngnice.com/guide/expression （開發文檔）