本篇通過幾個例子對AngularJS中的Directive進行彙總。例子1，單向綁定和雙向綁定 ==單向綁定{{contacts.length}}the first name is {{contacts[0].firstname}}{{contacts[0].f...
本篇通過幾個例子對AngularJS中的Directive進行彙總。
例子1，單向綁定和雙向綁定
<html ng-app="myApp"> <head> <script src="angualr.js"></script> <script> (function(){ var name = "myApp"; requried = []; myApp = null; myApp = angualr.module(name, requires); myApp.controller("AppCtrl", functioin($scope){ $scope.contacts = [ {firstname: "", lastname: "'}, ... ]; $scope.addContact = function(){ $scope.contacts.push({firstname:"", lastname:"", isEnabled:true}); } //切換視圖 $scope.viewFile = function(){ if($scope.viewState){ return "contact_list.html"; } else{ return "contact_table.html"; } } $scope.onPartialLoad = function(){ console.log($scope.viewFile() + " loaded"); } }) }()); </script> </head> <body ng-controller="AppCtrl"> </body> </html>
==單向綁定
{{contacts.length}} <div ng-bind="contacts.length"></div> <div ng-bind-template="">the first name is {{contacts[0].firstname}}</div> {{contacts[0].firstname}} {{::contacts.length}} 只展示一次數組長度，當數組長度有改變，這裡不變 {{ 2 + 3 }} {{ Math.min(4, 2)}} <button ng-click="addContact()">添加</button> <div ng-non-bindable>this is {{hello }}</div> 這裡的{{hello}}會顯示出來 ... <tr ng-repeat="contact in contacts" ng-class="$odd ? 'odd':'even'"> <td>{{$index + 1}}</td> <td>{{contact.firtname}}</td> <td>{{contact.lastname}}</td> <td>{{contact.isEnabled}}</td> <td>{{$first}}</td> <td>{{$last}}</td> <td>{{$middle}}</td> </tr> ... <ng-include src="'contact_table.html'"></ng-include> //切換視圖 <input type="checkbox" ng-model="viewState">切換視圖 <ng-include src="viewFile()" onload="onPartialLoad()"></ng-include>
==使用Directive的幾種方式
<div ng-bind="contacts.length"></div>
<div class="ng-bind:contacts.length"></div>
<ng-include></ng-include>
==雙向綁定
<input type="text" ng-model="contacts[0].firstname"/>
例子2，ng-switch
<html ng-app="myApp"> <head> angular.js <script> (function(){ var name = "myApp[]", requires = [], myApp = null; myApp = angular.module(name, requires); myApp.controller("AppCtrl", function($scope){ $scope.data = {}; }); }()); </script> </head> <body ng-controller="AppCtrl"> </body> </html>
頁面部分
<div ng-repeat="channel in ['None', 'Tv', 'kitty']" ng-cloak> <input type="radio" name ="leisure" value="{{channel}}" ng-model="data.whichChannel" ng-checked="$first" />{{channel}} </div> <div ng-switch on="data.whichChannel"> <div ng-switch-default>this is none</div> <div ng-switch-when="Tv">this is tv</div> <div ng-switch-when="kitty">this is kitty</div> </div>
以上，
● ng-checked 勾選
● ng-switch切換顯示其中的內容
● 當點擊Tv相關的這個RadioButton,把Tv這個值賦值給了data對象的whichChannel欄位，whichChannel欄位值得改變會告訴ng-swich所在的div，其子元素的ng-switch-when值如果和當前的whichChannel欄位值匹配，就顯示
● ng-cloak 避免綁定數據的時候頁面閃爍
例子3，顯示、隱藏、移除元素,ng-show, ng-hide, ng-if
$scope.toggleNewContact = false; $scope.shwoNewContactForm = function(){ $scope.toggleNewContact = true; } <button ng-click="showNewContactForm()">Add New Contact</button> <form ng-show="toggleNewContact"> <button ng-click="toggleNewContact = false">Cancel</button> </form> <tr ng-repeat="contact in contacts" ng-if="contact.isEnabled"> </tr>
例子4，勾選，只讀，禁用，鏈接
$scope.checkMe = true; $scope.url = "http://google.com"; $scope.imgSrc = "hi.jpeg"; //勾選 <input type="checkbox" ng-checked="{{checkME}}" /> check me //禁用按鈕 <button ng-disabled="{{checkMe}}">Click me</button> //只讀 <input type="text" value="he" ng-readonly="{{checkMe}}" /> //鏈接 <a href="{{url}}">go</a> <a ng-href="{{url}}">go</a> 推薦使用 //圖片 <img ng-src="{{imgSrc}}"/>
例子5，ng-style
<button ng-click="styles={'color':'red'}">set color</button> <button ng-click="styles={'font-weight':'bold'}">bold</button> <button ng-click="styles={'font-style':'italic'}>italic></button> <p ng-style="styles">hello</p>
例子6，ng-class
.strike{
text-decoration:line-through;
}
.bold{
font-weight:bold;
}
.red{
color:red;
}
==把一個值賦值給ng-class
//文本框和controller中的style變數綁定起來
<input type="text" ng-model="style" />
<p ng-class="style">he</p>
==把一個對象賦值給ng-class
<input type="checkbox" ng-model="deleted" /> deleted
<input tyep="checkbox" ng-model="important" /> important
<input type="checkbox" ng-model="error"> error
<p ng-class="{strike:deleted, bold:important, red:error}">hello</p>
==把一個數組賦值給ng-class
//運用所有的class
<p ng-class="['strike','bold','red']">hi</p>
另外，
<tr ng-repeat="contact in contacts" ng-class-odd="'odd'" ng-class-even="'even'"></tr>
例子7， 事件
ng-click, ng-mousedown, ng-mouseenter, ng-mouseleave, ng-mouseup
例子8，過濾
==對數組元素過濾
$scope.courses = [ {name:"", category:"", timeline:20, price:25}, ... ]; $scope.getTargetDate = function(days){ var now = new Date(); return now.setDate(now.getDate() + days); } <tr ng-repeat="course in courses"> <td>{{$index + 1}}</td> <td>{{course.name | upplercase}}</td> <td>{{course.category | lowercase }}</td> <td>{{getTargetDate(course.timeline) | date: 'dd MMM yy' | uppercase }}</td> <td>{{course.price | currency: "¥" }}</td> <td>{{course | json}}</td> </tr>
==對整個數組過濾
$scope.limitVal = 10; $scope.lessThan25 = function(item){ return item.price < 25; } {{courses.length}} <button ng-click="limitVal = 5">5</button> <button ng-click="limitVl = 10">10</button> //<input type="text" ng-model="searchStr" /> //<input type="text" ng-model="name" /> //<input type="text" ng-model="category"/> //<tr ng-repeat = "course in courses | limitTo: limitVal | filter: searchStr"> //<tr ng-repeat = "course in courses | limitTo: limitVal | filter: {name: name, category:category}"> //<tr ng-repeat = "course in courses | limitTo: limitVal | filter: lessThan25"> //<tr ng-repeat = "course in courses | limitTo: limitVal | orderBy: '-price'"> <tr ng-repeat = "course in courses | limitTo: limitVal | orderBy: ['name','-price']"> <td>{{$index + 1}}</td> <td>{{course.name}}</td> <td>{{course.category}}</td> <td>{{course.timeline}}</td> <td>{{course.price}}</td> </tr>
所以filter能接受的包括字元串、對象和函數。
