AngularJs 基础教程​ —— Select(选择框)

本文为H5EDU机构官方HTML5培训教程，主要介绍：AngularJs基础教程——Select(选择框)

AngularJSSelect(选择框)

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

使用ng-options创建选择框

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

实例

<divng-app="myApp"ng-controller="myCtrl">

<selectng-model="selectedName"ng-options="xforxinnames">

</select>

</div>

<script>

varapp=angular.module('myApp',[]);

app.controller('myCtrl',function($scope){

$scope.names=["Google","Runoob","Taobao"];

});

</script>

尝试一下»

ng-options与ng-repeat

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

实例

<select>

<optionng-repeat="xinnames">{{x}}</option>

</select>

尝试一下»

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:

<selectng-model="selectedSite">

<optionng-repeat="xinsites"value="{{x.url}}">{{x.site}}</option>

</select>

<h1>你选择的是:{{selectedSite}}</h1>

尝试一下»

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

实例

使用ng-options:

<selectng-model="selectedSite"ng-options="x.siteforxinsites">

</select>

<h1>你选择的是:{{selectedSite.site}}</h1>

<p>网址为:{{selectedSite.url}}</p>

尝试一下»

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

数据源为对象

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

$scope.sites={

site01:"Google",

site02:"Runoob",

site03:"Taobao"

};

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

实例

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

<selectng-model="selectedSite"ng-options="xfor(x,y)insites">

</select>

<h1>你选择的值是:{{selectedSite}}</h1>

尝试一下»

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

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

实例

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

$scope.cars={

car01:{brand:"Ford",model:"Mustang",color:"red"},

car02:{brand:"Fiat",model:"500",color:"white"},

car03:{brand:"Volvo",model:"XC90",color:"black"}

};

尝试一下»

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

实例

<selectng-model="selectedCar"ng-options="y.brandfor(x,y)incars">

</select