AngularJS Select(选择框)
AngularJS 可以使用数组或对象创建一个下拉列表选项。
使用 ng-options 创建选择框
在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出，如下实例:
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="/UploadFiles/2021-04-02/angular.min.js">运行结果：
该实例演示了 ng-options 指令的使用。
ng-options 与 ng-repeat
我们也可以使用ng-repeat 指令来创建下拉列表：
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="/UploadFiles/2021-04-02/angular.min.js">运行结果：
该实例演示了使用 ng-repeat 指令来创建下拉列表。
ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：
使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。
应该用哪个更好"htmlcode">
$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:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="/UploadFiles/2021-04-02/angular.min.js">运行效果：
选择网站：
你选择的是：http://www.google.com
该实例演示了使用 ng-repeat 指令来创建下拉列表，选中的值是一个字符串。
使用 ng-options 指令，选择的值是一个对象：
实例
使用 ng-options:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="/UploadFiles/2021-04-02/angular.min.js">运行效果：
选择网站：
你选择的是：google
网址为：http://www.google.com
该实例演示了使用 ng-options 指令来创建下拉列表，选中的值是一个对象。
当选择值是一个对象时，我们就可以获取更多信息，应用也更灵活。
数据源为对象
前面实例我们使用了数组作为数据源，以下我们将数据对象作为数据源。
$scope.sites = { site01 : "Google", site02 : "Runoob", site03 : "Taobao" };ng-options 使用对象有很大的不同，如下所示：
实例
使用对象作为数据源, x 为键(key), y 为值(value):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="/UploadFiles/2021-04-02/angular.min.js">运行效果：
选择的网站是：
你选择的值是：Google
该实例演示了使用对象作为创建下拉列表。
你选择的值为在 key-value 对中的 value。
value 在 key-value 对中也可以是个对象：
实例
选择的值在 key-value 对的 value 中, 这是它是一个对象:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="/UploadFiles/2021-04-02/angular.min.js">运行结果：
选择一辆车
你选择的是： Fiat
模型： 500
颜色： white
注意： 选中的值是一个对象。
在下拉菜单也可以不使用 key-value 对中的 key , 直接使用对象的属性：
实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="/UploadFiles/2021-04-02/angular.min.js">运行结果：
选择一辆车：
你选择的是： Ford
型号为：Mustang
颜色为： red
下拉列表中的选项也可以是对象的属性。
以上就是对AngularJS Select资料的整理，后续继续补充，希望能帮助有需要的朋友。
相思资源网 Design By www.200059.com广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com相思资源网 Design By www.200059.com暂无AngularJS入门教程之Select(选择框)详解的评论...苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。