AngularJS Select(选择框)

使用 ng-options 创建选择框

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

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

<select 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 = ["Google","Runoob","Taobao"]; }); </script>

ng-options 与 ng-repeat
我们也可以使用ng-repeat 指令来创建下拉列表:
实例

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

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

ng-repeat 有局限性,选择的值是一个字符串:
实例
使用 ng-r
{{x.site}}

</select>>的是: {{selectedSite}}

尝试一下 »
使用 ng-options 指令,选择的值是一个对象:
实例
使用 ng-options:

<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>

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

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...