AngularJS入门教程之Select(选择框)详解

AngularJS Select(选择框)

AngularJS 可以使用数组或对象创建一个下拉列表选项。

使用 ng-options 创建选择框

在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出，如下实例:

实例

该实例演示了 ng-options 指令的使用。

运行结果：

Google Runoob Taobao

该实例演示了 ng-options 指令的使用。

ng-options 与 ng-repeat

我们也可以使用ng-repeat 指令来创建下拉列表：

实例

{{x}}






该实例演示了使用 ng-repeat 指令来创建下拉列表。

运行结果：

  Google Runoob Taobao  

该实例演示了使用 ng-repeat 指令来创建下拉列表。

ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：
使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。

应该用哪个更好?

假设我们使用以下对象:

$scope.sites = [
 {site : "Google", url : "http://www.google.com"},
 {site : "Runoob", url : "http://www.runoob.com"},
 {site : "Taobao", url : "http://www.taobao.com"}
];

ng-repeat 有局限性，选择的值是一个字符串:

实例

使用 ng-repeat:

选择网站:


{{x.site}}


你选择的是: {{selectedSite}}





该实例演示了使用 ng-repeat 指令来创建下拉列表，选中的值是一个字符串。

运行效果：

 选择网站：

Google Runoob Taobao

你选择的是：http://www.google.com

 该实例演示了使用 ng-repeat 指令来创建下拉列表，选中的值是一个字符串。

 使用 ng-options 指令，选择的值是一个对象：

实例

使用 ng-options:

选择网站:




你选择的是: {{selectedSite.site}}
网址为: {{selectedSite.url}}





该实例演示了使用 ng-options 指令来创建下拉列表，选中的值是一个对象。

 运行效果：

 选择网站：

Google Runoob Taobao

你选择的是：google

网址为：http://www.google.com

该实例演示了使用 ng-options 指令来创建下拉列表，选中的值是一个对象。

 当选择值是一个对象时，我们就可以获取更多信息，应用也更灵活。

数据源为对象

前面实例我们使用了数组作为数据源，以下我们将数据对象作为数据源。

$scope.sites = {
 site01 : "Google",
 site02 : "Runoob",
 site03 : "Taobao"
};

ng-options 使用对象有很大的不同，如下所示：

实例

使用对象作为数据源, x 为键(key), y 为值(value):

选择的网站是:




你选择的值是: {{selectedSite}}



该实例演示了使用对象作为创建下拉列表。

运行效果：

选择的网站是：

site01 site02 site03

你选择的值是：Google

该实例演示了使用对象作为创建下拉列表。

 你选择的值为在 key-value 对中的 value。

value 在 key-value 对中也可以是个对象：

实例

选择的值在 key-value 对的 value 中, 这是它是一个对象:

选择一辆车:




你选择的是: {{selectedCar.brand}}
模型: {{selectedCar.model}}
颜色: {{selectedCar.color}}

注意选中的值是一个对象。

运行结果：

选择一辆车

car01 car02 car03

你选择的是： Fiat

模型： 500

颜色： white

注意： 选中的值是一个对象。

在下拉菜单也可以不使用 key-value 对中的 key , 直接使用对象的属性：

实例：

选择一辆车:


你选择的是: {{selectedCar.brand}}
型号为: {{selectedCar.model}}
颜色为: {{selectedCar.color}}

下拉列表中的选项也可以是对象的属性。

运行结果：

选择一辆车：

Ford Fiat Volvo

你选择的是： Ford

型号为：Mustang

颜色为： red

下拉列表中的选项也可以是对象的属性。

以上就是对AngularJS Select资料的整理，后续继续补充，希望能帮助有需要的朋友。