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>

点击进入JS强化教程

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!