指令
Angular.js應(yīng)用的動(dòng)態(tài)性和響應(yīng)能力，都要?dú)w功于指令屬性，常見(jiàn)的有：ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。
demo:
<div ng-app="" ng-init="name='word'">
Hello {{name}}
</div>
頁(yè)面顯示 Hello word
題外話: {{names[1]}} 如果names是一個(gè)數(shù)組 ng-init="names=['Tom','Jerry','Gaffey']"，則通過(guò)下標(biāo)可以獲取到對(duì)應(yīng)的數(shù)組對(duì)象
ng-app
ng-app指令來(lái)標(biāo)明一個(gè)AngularJS應(yīng)用程序,同時(shí)載入和指令內(nèi)容相關(guān)的模塊，相當(dāng)于標(biāo)記了作用域。
ng-init
為AngularJS應(yīng)用程序定義初始值
表達(dá)式
{{}}一般是兩對(duì)花括號(hào)，括號(hào)內(nèi)可以輸出 數(shù)字 可以 輸出 數(shù)組 {{ quantity * price }} {{ names[0] }}
ng-model
實(shí)現(xiàn)雙向數(shù)據(jù)綁定 可以用于input 輸入框等
ng-bind
和{{}}類似 但是他可以避免其未被渲染的模板被用戶看到。
ng-click
點(diǎn)擊事件指令
ng-hide="true"，設(shè)置HTML元素不可見(jiàn)。
綜合demo:
<div ng-app="" ng-init="click=true">
<button ng-click="click=!click">顯示和隱藏</button>
<div ng-hide="click">
請(qǐng)輸入一個(gè)名字<input type="text" ng-model="name"/>
<span ng-bind="name"></span>
</div>
</div>
控制器
控制器控制AngularJS應(yīng)用程序的數(shù)據(jù)
ng-controller指令
就是用來(lái)定義應(yīng)用程序控制器的，并且同時(shí)創(chuàng)建了一個(gè)新的作用域關(guān)聯(lián)到相應(yīng)的DOM元素上。
demo:
html <div ng-app="" ng-controller="indexPage">
<input type="text" ng-model="person.name">
<span ng-bind="person.name"></span>
</div>
js var indexPage=function($scope){
$scope.person={
name:'你好我是控制器的數(shù)據(jù)'
}
}
$scope就是把一個(gè)DOM元素連結(jié)到控制器上的對(duì)象，它提供一個(gè)綁定到DOM元素(以及其子元素)上的執(zhí)行上下文。它也是一個(gè)JavaScript對(duì)象，指向應(yīng)用程序作用域內(nèi)的所有HTML元素和執(zhí)行上下文。
通過(guò)點(diǎn)擊事件觸發(fā)函數(shù)demo:
html <div ng-app ng-controller="main">
<button ng-click="person()">
點(diǎn)擊顯示出發(fā)函數(shù)
</button>
<span ng-bind="number"></span>
</div>
js var main=function($scope){
$scope.person=function(){
$scope.number='我是數(shù)組';
}
}
常用的指令
一·
ng-hide
ng-show指令和ng-hide用法相同但行為相反
所以在能使用ng-if的情況,用它代替所有的ng-show和ng-hide吧！
ng-show指令雖然隱藏了但還是會(huì)執(zhí)行其中的所有綁定，而ng-if就不同了，它只會(huì)在等于true的時(shí)候也就是顯示的時(shí)候才去執(zhí)行其中的綁定，這樣一來(lái)性能就有很大的提高
二·
ng-repeat 循環(huán)渲染數(shù)據(jù)
demo:
html <div ng-app="" ng-controller="repeatDemo">
<table>
<tr ng-repeat="i in person">
<td ng-bind="i.name"></td>
</tr>
</table>
</div>
js var repeatDemo=function($scope){
$scope.person=[
{name:'Tom', age:25},
{name:'Jerry', age:28},
{name:'Tom', age:25},
{name:'Jerry', age:28}
]
}
過(guò)濾器
過(guò)濾器可以實(shí)現(xiàn)對(duì)字符串的大小寫轉(zhuǎn)換、貨幣格式的轉(zhuǎn)換、數(shù)組的過(guò)濾等等。
用法：管道字符(|)+過(guò)濾器名。
uppercase 轉(zhuǎn)為大寫 lowercase轉(zhuǎn)為小寫
demo:
<div ng-app="">
<input type="text" ng-model="name">
<span ng-bind="name | uppercase"></span>
</div>
filter過(guò)濾器可以過(guò)濾數(shù)組并從中選擇出一個(gè)子集出來(lái)
demo:
<div ng-app="" ng-controller="repeatDemo">
<input type="text" ng-model="name">
<li ng-repeat="i in person | filter:name">
{{ i.name + ' , ' + i.age }}
</li>
</div>
var repeatDemo=function($scope){
$scope.person=[
{name:'Tom', age:25},
{name:'peki', age:28},
{name:'will', age:25},
{name:'Jerry', age:28}
]
}
