社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 web前端 js教程 详解讲解AngularJS之ng-options 指令

详解讲解AngularJS之ng-options 指令

Jun 27, 2017 am 11:50 AM
angularjs javascript

本文主要介绍AngularJS ng-options 指令,这里对ng-options指令的知识做了详细整理,并附有详细的代码示例,有需要的小伙伴可以参考下

AngularJS ng-options 指令

AngularJS 实例

使用数组元素填充下拉列表:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

 

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

 

<select ng-model="selectedName" ng-options="item for item in names">

</select>

 

</p>

 

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

  $scope.names = ["Emil", "Tobias", "Linus"];

});

</script>

 

<p>该实例演示了如何使用 ng-options 指令填充下拉列表。</p>

 

</body>

</html>

登录后复制

定义和用法

ng-options 指令用于使用 <options> 填充 <select> 元素的选项。

ng-options 指令使用数组来填充下拉列表，多数情况下与 ng-repeat 指令一起使用。

语法

<select ng-options="array expression"></select>

<details> 元素支持该指令。

参数值

值 描述
array expression 数组中为 select 元素填充选项的表达式。

以上就是对AngularJS ng-options资料的整理，后续继续补充。

以上是详解讲解AngularJS之ng-options 指令的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热门文章

击败分裂小说需要多长时间？
3 周前 By DDD
仓库：如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险：如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？
3 周前 By 王林
显示更多

热门工具标签

代码&IT
音频
商业
营销
AI检测器
聊天机器人
设计与艺术

热门文章

击败分裂小说需要多长时间？
3 周前 By DDD
仓库：如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险：如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？
3 周前 By 王林
显示更多

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7281
9
Java教程
1622
14
CakePHP 教程
1341
46
Laravel 教程
1258
25
PHP教程
1205
29
显示更多
Related knowledge
如何使用WebSocket和JavaScript实现在线语音识别系统 如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统

WebSocket与JavaScript：实现实时监控系统的关键技术 WebSocket与JavaScript：实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript：实现实时监控系统的关键技术

如何使用WebSocket和JavaScript实现在线预约系统 如何使用WebSocket和JavaScript实现在线预约系统 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript实现在线预约系统

如何利用JavaScript和WebSocket实现实时在线点餐系统 如何利用JavaScript和WebSocket实现实时在线点餐系统 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket实现实时在线点餐系统

JavaScript和WebSocket：打造高效的实时天气预报系统 JavaScript和WebSocket：打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的实时天气预报系统

简易JavaScript教程：获取HTTP状态码的方法 简易JavaScript教程：获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

简易JavaScript教程：获取HTTP状态码的方法

如何在JavaScript中获取HTTP状态码的简单方法 如何在JavaScript中获取HTTP状态码的简单方法 Jan 05, 2024 pm 01:37 PM

如何在JavaScript中获取HTTP状态码的简单方法

javascript中如何使用insertBefore javascript中如何使用insertBefore Nov 24, 2023 am 11:56 AM

javascript中如何使用insertBefore

See all articles