AngularJS Select(选择框) | 菜鸟教程
菜鸟教程 -- 学的不仅是技术，更是梦想！
首页
HTML
CSS
JavaScript
Vue
Bootstrap
NodeJS
Python3
Python2
Java
C++
C#
Go
SQL
Linux
jQuery
本地书签
首页
HTML
CSS
JS
本地书签
Search
Python3 教程
Python2 教程
Vue3 教程
vue2 教程
Bootstrap3 教程
Bootstrap4 教程
Bootstrap5 教程
Bootstrap2 教程
AngularJS 教程
AngularJS 教程
AngularJS 简介
AngularJS 表达式
AngularJS 指令
AngularJS 模型
AngularJS Scope(作用域)
AngularJS 控制器
AngularJS 过滤器
AngularJS Service
AngularJS Http
AngularJS Select AngularJS 表格 AngularJS SQL
AngularJS HTML DOM
AngularJS 事件
AngularJS 模块
AngularJS 表单
AngularJS 输入验证
AngularJS API
AngularJS Bootstrap
AngularJS 包含
AngularJS 动画
AngularJS 依赖注入
AngularJS 路由
AngularJS 应用
AngularJS 实例
AngularJS 实例
AngularJS 参考手册
AngularJS 参考手册
AngularJS ng-value 指令
AngularJS 服务(Service)
AngularJS Select(选择框)
AngularJS 可以使用数组或对象创建一个下拉列表选项。
使用 ng-options 创建选择框
在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出，如下实例:
实例
<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 = ["Google", "Runoob", "Taobao"];
});
</script>
尝试一下 »
ng-init 设置默认选中值。
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 是一个字符串。
应该用哪个更好?
假设我们使用以下对象:
$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:
<select ng-model="selectedSite"><option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select><h1>你选择的是: {{selectedSite}}</h1>
尝试一下 »
使用 ng-options 指令，选择的值是一个对象：
实例
使用 ng-options:
<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select><h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>
尝试一下 »
当选择值是一个对象时，我们就可以获取更多信息，应用也更灵活。
数据源为对象
前面实例我们使用了数组作为数据源，以下我们将数据对象作为数据源。
$scope.sites = {
site01 : "Google",
site02 : "Runoob",
site03 : "Taobao"
};
ng-options 使用对象有很大的不同，如下所示：
实例
使用对象作为数据源, x 为键(key),
为值(value):
<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</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 , 直接使用对象的属性：
实例
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>
尝试一下 »
AngularJS ng-value 指令
AngularJS 服务(Service)
4 篇笔记
写笔记
#0 烈焰灬 747***309@qq.com 11页面下拉框初始化是空的，设置初始值方法：
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
$scope.selectedCar = $scope.cars.car02; //设置第2个为初始值；
});
尝试一下 »烈焰灬 烈焰灬 747***309@qq.com5年前 (2017-09-13)
#0 youlangta 724***451@qq.com 2另外一种设置初始值的方法：
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-init="selectPerson=persons['caohui']" ng-model="selectPerson"
ng-options="x for (x,y) in persons">
</select>
<p>
年龄:{{selectPerson.age}}
</p>
<p>
性别:{{selectPerson.sex}}
</p>
<p>
月薪:{{selectPerson.salary}}
</p>
</div>
尝试一下 »youlangta youlangta 724***451@qq.com5年前 (2017-09-17)
#0 骑鱼看大海 114***8436@qq.com 2给 id 一个别名 y.name，显示出来的 name 值，但实际还是 id 值。
<div ng-app="myApp" ng-controller="myCtrl">
<p>给 id 一个别名 y.name，显示出来的name值，但实际还是 id 值。</p>
<select ng-init="selectPersonid=persons['caohui'].id" ng-model="selectPersonid" ng-options="y.id as y.name for (x,y) in persons">
</select>
<p>
id:{{selectPersonid}}
</p>
</div>
尝试一下 »骑鱼看大海 骑鱼看大海 114***8436@qq.com4年前 (2018-08-21)
#0 kindaries kin***ies@qq.com 3下拉框默认的值为 key-value 对中的 value ，也可以用 as 来修改下拉框的值。
也就是 x for (x, y) 相当于是 y as x for (x, y)。
as 前面的为下拉框的值，后面的为下拉框显示的内容。
也可以不使用 key-value 对中的 value 作为下拉框的值, 直接使用对象的属性，代码示例：
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>使用 ng-options 创建下拉列表,选中的值是一个对象:</p>
<select ng-model="selectedSite" ng-options="y.url as x for (x, y) in sites">
</select>
<h4>你选择的是: {{selectedSite}}</h4>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sites = {
site01 : {site : "Google", url : "http://www.google.com"},
site02 : {site : "Runoob", url : "https://www.runoob.com"},
site03 : {site : "Taobao", url : "http://www.taobao.com"}
};
$scope.selectedSite = $scope.sites.site02.url; //设置第2个为初始值；
});
</script>
</body>
尝试一下 »kindaries kindaries kin***ies@qq.com4年前 (2018-10-08)
点我分享笔记
取消
分享笔记
昵称昵称 (必填)
邮箱邮箱 (必填)
引用地址引用地址
分类导航
HTML / CSSHTML 教程HTML5 教程CSS 教程CSS3 教程Bootstrap3 教程Bootstrap4 教程Bootstrap5 教程Font Awesome 教程Foundation 教程 JavaScriptJavaScript 教程HTML DOM 教程jQuery 教程AngularJS 教程AngularJS2 教程Vue.js 教程Vue3 教程React 教程TypeScript 教程jQuery UI 教程jQuery EasyUI 教程Node.js 教程AJAX 教程JSON 教程Echarts 教程Chart.js 教程Highcharts 教程Google 地图 教程 服务端Python 教程Python2.x 教程Linux 教程Docker 教程Ruby 教程Java 教程C 教程C++ 教程Perl 教程Servlet 教程JSP 教程Lua 教程Rust 教程Scala 教程Go 教程PHP 教程数据结构与算法Django 教程Zookeeper 教程设计模式正则表达式Maven 教程Verilog 教程ASP 教程AppML 教程VBScript 教程 数据库SQL 教程MySQL 教程PostgreSQL 教程SQLite 教程MongoDB 教程Redis 教程Memcached 教程 数据分析Python 教程NumPy 教程Pandas 教程Matplotlib 教程Scipy 教程R 教程Julia 教程 移动端Android 教程Swift 教程jQuery Mobile 教程ionic 教程Kotlin 教程 XML 教程XML 教程DTD 教程XML DOM 教程XSLT 教程XPath 教程XQuery 教程XLink 教程XPointer 教程XML Schema 教程XSL-FO 教程SVG 教程 ASP.NETASP.NET 教程C# 教程Web Pages 教程Razor 教程MVC 教程Web Forms 教程 Web ServiceWeb Service 教程WSDL 教程SOAP 教程RSS 教程RDF 教程 开发工具Eclipse 教程Git 教程Svn 教程Markdown 教程 网站建设HTTP 教程网站建设指南浏览器信息网站主机教程TCP/IP 教程W3C 教程网站品质
Advertisement
反馈/建议
在线实例
·HTML 实例
·CSS 实例
·JavaScript 实例
·Ajax 实例
·jQuery 实例
·XML 实例
·Java 实例
字符集&工具
· HTML 字符集设置
· HTML ASCII 字符集
· JS 混淆/加密
· PNG/JPEG 图片压缩
· HTML 拾色器
· JSON 格式化工具
· 随机数生成器
最新更新
·
Go fmt.Printf ...
·
CSS backdrop-filte
·
使用 JS 的 down...
·
Navigator produ...
·
Navigator onLin...
·
Navigator langu...
·
Navigator geolo...
站点信息
·
意见反馈
·
免责声明
·
关于我们
·
文章归档
关注微信
Copyright 2013-2022 菜鸟教程
runoob.com All Rights Reserved. 备案号：闽ICP备15012807号-1
微信关注