编程 Javascript

AngularJS基础 ng-options 指令详解

Posted in Javascript onAugust 02, 2016

AngularJS ng-options 指令

AngularJS 实例

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

<!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>

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

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

</div>

<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 指令一起使用。

语法

<details> 元素支持该指令。

参数值

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

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

AngularJS基础 ng-options 指令详解

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

经常用到的JavasScript事件的翻译

Apr 09 Javascript

把JS与CSS写在同一个文件里的书写方法

Jun 02 Javascript

jQuery ajax 路由和过滤器使用说明

Aug 02 Javascript

jquery无刷新验证邮箱地址实现实例

Feb 19 Javascript

javascript中scrollTop详解

Apr 13 Javascript

jquery左右全屏大尺寸多图滑动效果代码分享

Aug 28 Javascript

JS实现网页标题随机显示名人名言的方法

Nov 03 Javascript

Vuejs第十一篇组件之slot内容分发实例详解

Sep 09 Javascript

详解vue.js的devtools安装

May 26 Javascript

el-input 标签中密码的显示和隐藏功能的实例代码

Jul 19 Javascript

微信小程序下拉加载和上拉刷新两种实现方法详解

Sep 05 Javascript

浅谈VUE中演示v-for为什么要加key

Jan 16 Javascript

深入理解JavaScript中Ajax

Aug 02 #Javascript

AngularJS基础 ng-open 指令简单实例

Aug 02 #Javascript

AngularJS基础 ng-non-bindable 指令详细介绍

Aug 02 #Javascript

实例详解jQuery的无new构建

Aug 02 #Javascript

AngularJS基础 ng-mouseover 指令简单示例

Aug 02 #Javascript

JavaScript比较当前时间是否在指定时间段内的方法

Aug 02 #Javascript

图文详解JavaScript的原型对象及原型链

Aug 02 #Javascript