AngularJS 选择框

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

使用ng-options创建选择框

实例:

<div ng-app="myApp" ng-controller="myCtrl">
 <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"></select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["course", "imooc", "coding"];
});
</script>

运行案例

使用ng-repeat创建下拉列表

实例:

<select>
<option ng-repeat="x in names">{{x}}</option>
</select>

运行案例

说明:ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表, ng-options 指令更适合创建下拉列表。

使用 ng-options 的选项是一个对象, ng-repeat 是一个字符串。

数据源作为对象

$scope.sites = {
    site01 : "course",
    site02 : "imooc",
    site03 : "coding"
};

ng-options实例:

<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>
<h1>选择的值是: {{selectedSite}}</h1>

运行案例

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

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

实例:

$scope.country= {
country01 : {country: "China", capital: "Beijing", language: "Chinese"},
country02 : {country: "Britain", capital: "London", language: "English"},
country03 : {country: "America", capital: "Washington", language: "English"}
};

运行案例

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

实例:

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in country">
</select>

运行案例

本内容均来自互联网,仅供参考,如有侵权请及时通知本站予以删除。邮箱:wiki#imooc.com (#改成@)

意见反馈 帮助中心 APP下载
官方微信