AngularJS HTML DOMng-optionsng-disabledng-show和ng-hide

angularjs 為 html dom 元素的屬性提供了綁定應用資料的指令。今天就為大家介紹一下angularjs中一些與html dom操作有關的指令。

在 angularjs 中我們可以使用 ng-option 指令來建立一個下拉清單，清單項通過對象和數組循環輸出。示例代碼如下：

這樣就會顯示一個下拉選擇清單，看過之前部落格的朋友應該知道，在angularjs中有一個<code>ng-repeat</code>指令用于重複建立元素，那麼我們用<code>ng-repeat</code>來實作同樣的效果，代碼如下：

這段代碼也同樣可以實作顯示一個下拉選擇框，那麼在這兩者當中，使用哪個更好呢？

<code>ng-repeat</code> 指令是通過數組來循環 html 代碼來建立下拉清單，但 <code>ng-options</code> 指令更适合建立下拉清單，使用 <code>ng-options</code> 的資料可以是對象， 而<code>ng-repeat</code> 是一個字元串。，當我們用于建立下拉選擇框的資料是一個對象的時候，<code>ng-options</code>的優勢就特别明顯了。下面我們通過代碼來示範一下：

<code>ng-disabled</code> 指令直接綁定應用程式資料到 html 的 disabled 屬性。

示例代碼：

<code>ng-show</code> 指令隐藏或顯示一個 html 元素。<code>ng-hide</code> 指令也是用于隐藏或顯示 html 元素。與<code>ng-show</code>相反。