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>相反。