angular.js常用內建指令
阿新 • • 發佈：2019-01-25
**指令，我將其理解為AngularJS操作HTML element的一種途徑。
AngularJS 指令是擴充套件的 HTML 屬性，帶有字首 ng-。**
angularjs指令：
1.ngApp
寫法：ng-app
ng-app 指令初始化一個 AngularJS 應用程式。
①啟動ng
②指定作用範圍，將指令寫在根標籤(html)
如：
`<!DOCTYPE html>
<html ng-app>//將根節點作為指定的範圍
<head lang="en">
</head>
</html>
`2：ngInit 指令 來完成資料的初始化
寫法： <any ng-init="a=1;b=2"/>
①不需要在通過ngInit指令定義資料時候，加上var關鍵字
②ngInit所初始化的變數是可以在整個html去使用變數
通過ngInit呼叫一次，初始化多個變數？？
<!--通過ngInit指令定義一個數組-->
<span ng-init=" list=[100,200,300]">
{{list[1]}} //100
</span>
<p>{{list[1]}}</p> // 200
<span ng-init="car={name:'BMW',price:20}" 3.{{}} 常用表示式
寫法：<any>{{XXX}}</any>
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<title></title>
</head>
<body 值得注意的是只有在指令ng-app指定範圍才有效。
4 ngIf:選擇是否要顯示出來（掛載到DOM，從DOM中刪除）
寫法：
<table ng-init="stuList=[
{name:'zhangsan',score:80,sex:'male'},
{name:'Reese',score:81,sex:'male'},
{name:'Finch',score:82,sex:'male'},
{name:'Lincoln',score:83,sex:'male'},
{name:'TBag',score:84,sex:'male'},
]">
<thead>
<tr>
<th>名稱</th>
<th>成績</th>
<th>性別</th>
</tr>
</thead>
<tbody>
<tr ng-if="tmp.score > 82" ng-repeat="tmp in stuList">
<td>{{tmp.name}}</td>
<td>{{tmp.score}}</td>
<td>{{tmp.sex}}</td>
</tr>
</tbody>5 ngShow/ngHide 選擇是否要顯示出來(顯示或者隱藏)
寫法：
<div ng-init="isMemeber=false;
hasMore=false;
isFormValid=false;
isAgree=true;
imgUrl='1.jpg'">
<p ng-if="isMemeber">僅會員可見</p>
<button ng-show="hasMore">載入更多</button>
<p ng-hide="hasMore">沒有更多資料可以載入了</p>
<img ng-src="img/{{imgUrl}}" alt=""/>
是否同意<input type="checkbox" ng-checked="isAgree"/>
<br/>
<button ng-disabled="!isFormValid">
註冊
</button>6 ngSrc 相當於src 用來顯示圖片的路徑
寫法：<img ng-src="img/{{imgUrl}}" />
注意：在使用ngSrc去讀取變數中值的時候，要記得加上雙花括號。如果你寫的不是ngSrc而是src，顯示是ok的，但是控制檯是會報錯的，通過ngSrc去指定就搞定了
<img ng-src="img/{{imgUrl}}" alt=""/>7 ngdisabled是否禁用摸個控制元件
寫法：<any ng-disabled='表示式'></any>
8 ngchecked 是否選中
9 ngRepeat重複例項化模板
使用ngRpeat的時候要遍歷的集合預設是不允許有重複的資料，可以通過 track by $index來指定一個不會重複的值就可以解決報錯的問題。
如：
<!--$index是在使用ngRepeat時所提供的特殊屬性，記錄的是迭代的偏移量-->
//如果遍歷的集合有重複的資料的話：
//正確的寫法：
<ul ng-init='myList=[10,10,20,30]'>
<li ng-repeat="tmp in myList track by $index">
{{"$index is "+$index+" tmp is "+tmp}}
</li>
</ul>
//報錯：
<ul ng-init='myList=[10,10,20,30]'>
<li ng-repeat="tmp in myList ">
{{"$index is "+$index+" tmp is "+tmp}}
</li>
</ul>這裡放一個demo供大家參考：
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/angular.js"></script>
</head>
<body>
/二種語法：
//<any ng-repeat="臨時變數的名稱 in 集合的名稱"></any>
//<any ng-repeat="（key,value） in 集合的名稱"></any>
<div ng-init="isMemeber=false;
hasMore=false;
isFormValid=false;
isAgree=true;
imgUrl='1.jpg'">
<p ng-if="isMemeber">僅會員可見</p>
<button ng-show="hasMore">載入更多</button>
<p ng-hide="hasMore">沒有更多資料可以載入了</p>
<img ng-src="img/{{imgUrl}}" alt=""/>
是否同意<input type="checkbox" ng-checked="isAgree"/>
<br/>
<button ng-disabled="!isFormValid">
註冊
</button>
</div>
</body>
</html>“`
這只是angularjs常用到的指令。當然hai有很多指令如ngBind,ngchange,ngClassEven,ngCopy等等。我就不一一列舉了