行如風 Angular 初識4

學習Angular已經有一段時間了，可以說收獲越來越多，上一篇主要說了一下關于數據雙向綁定MVVM的問題，今天來說一下Angular的用到的一些關鍵指令以及它的用法~~

    1.首先，先說一下ng-app，ng-controller和ng-init；

    ng-app是Angular模塊初始化的指令，Angular的指令如果要起作用，必須放在對應的ng-app模塊內部。

    ng-controller是Angular的控制器，通常情況下會和ng-app一起放一個HTML標簽里，其他指令也必須放到它的內部。

    ng-init是$scope值初始定義的指令作用如下：

<divng-app=""ng-init="firstName='John'">
<p>在輸入框中嘗試輸入：</p>
<p>你輸入的為：{{ firstName }}</p>
</div>

    2.然后說一下關于內容綁定的指令ng-model和ng-bind和{{內容}}

<p>你輸入的為：{{ firstName }}</p>
<p>姓名：<inputtype="text"ng-model="firstName"></p>
<p ng-bind="firstName"></p>

    ng-model指令適用于Form表單的value值綁定

    ng-bind指令和`XX`適用于其他標簽的內容綁定

    3.顯示和隱藏指令ng-show，ng-hide以及ng-if

<div ng-app="">
<p ng-show="true">我是可見的。</p>
<p ng-show="false">我是不可見的。</p>
<p ng-if="true">我是可見的。(被克隆添加到父元素里)</p>
<p ng-if="false">我是不可見的。(從父元素里刪除)</p>
</div>

4.重復Html元素ng-repeat,ng-options

ng-repeat指令對于集合中（數組中）的每個項會克隆一次 HTML元素, ng-repeat 有局限性，選擇的值是一個字符串:

<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="`x`.`url`">`x`.`site`</option>
</select>
<h2>你選擇的是: `selectedSite`</h2>

使用ng-options指令，選擇的值是一個對象:

<select ng-model="selectedSite" ng-options="x.site forx in sites">
</select>
<h2>你選擇的是: `selectedSite`.`site`</h2>
<p>網址為: `selectedSite`.`url`</p>

   5.ng-disabled指令

   ng-disabled 指令直接綁定應用程序數據到 HTML 的 disabled 屬性。

<div ng-app="" ng-init="mySwitch=true">
<p><button ng-disabled="mySwitch">點我!</button></p>
<p><input type="checkbox" ng-model="mySwitch">按鈕</p>
<p>{{ mySwitch }}</p>
</div>

    上面的指令是使用Angular會經常用到的指令，仔細的寫一遍收獲會更大~~~bilibili