AngularJS基础 ng-options 指令详解_AngularJS

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

语法

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

<details> 元素支持该指令。

参数值

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

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索angularjs
, 指令
, ng-Options
指令示例代码
angularjs ng options、angularjs ng指令、angularjs 指令详解、angularjs ui options、angularjs options,以便于您获取更多的相关知识。

时间: 2024-09-13 10:47:54

AngularJS基础 ng-options 指令详解_AngularJS的相关文章

AngularJS基础 ng-csp 指令详解_AngularJS

AngularJS ng-csp 指令 AngularJS 实例 修改 AngularJS 中关于 "eval" 的行为方式及内联样式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">

AngularJS入门教程之ng-checked 指令详解_AngularJS

AngularJS ng-checked 指令 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>

AngularJs表单验证实例详解_AngularJS

常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <input type="text" ng-minlength="

AngularJS 单元测试(二)详解_AngularJS

使用对象模拟注入 我们可以非常容易的使用angularjs的$provider服务用一个对象模拟一个依赖并且注入. 例子如下 angular.module('artists',[]). factory('Artists',['imageStore',function(imageStore){ return { thumb:function(){ return imageStore.thumbnailUrl(id) } } }]) 如何实现 如何确定了服务 1.创建一个URL的引用,稍后会被moc

AngularJS 单元测试(一)详解_AngularJS

AngularJS单元测试 网上有很多单元测试的教程,比如如何安装jasmine和ngMock,大家可以搜一下.这里就不在说了.下面重点介绍一个单元测试的过程. 加载一个模块 AngularJS用module来包括应用不同的部分比如controllers,services, filters.为了测试不同的部分,我们需要一个不同模块的引用,并且加载它.Angularjs模块注入使用ngMock模块.ngMock模块能够注入服务service进入单元测试. ngMock暴露出angular.mock

AngularJS 实现JavaScript 动画效果详解_AngularJS

AngularJS 应用中实现 JavaScript 动画效果 AngularJS 是一组用于创建单页Web应用的丰富框架,给构建丰富交互地应用带来了所有需要的功能.其中一项主要的特性就是Angular带来了对动画的支持. 我们能够在应用的部分内容当中使用动画来表明一些变化正在发生.在我上一篇文章当中,我讲到了在Angular应用中对CSS动画的支持.在这篇文章当中,我们会看到怎样利用JavaScript脚本在AngularJS应用当中生成动画效果. 在Angular当中,CSS和JavaScr

AngularJS控制器之间的通信方式详解_AngularJS

本文实例讲述了AngularJS控制器之间的通信方式.分享给大家供大家参考,具体如下: 一.利用作用域的继承方式 由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会影响到子作用域,反之,修改子作用域只会影响子作用域的值,不会影响父作用域上面的值:如果需要父作用域与子作用域共享一个值的话,就需要用到后面一种,即作用域上的值为对象,任何一方的修改都能影响另一方,这是因为在js中对象都是引用类型. 基本类型 function San

AngularJS入门教程之控制器详解_AngularJS

AngularJS 控制器 AngularJS 控制器 控制 AngularJS 应用程序的数据.  AngularJS 控制器是常规的 JavaScript 对象. AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建. AngularJS 实例 <!DOCTYPE html> <html> <head>

AngularJS入门教程之过滤器详解_AngularJS

在这一步你将学习到如何创建自己的显示过滤器. 请重置工作目录: git checkout -f step-9 现在转到一个手机详细信息页面.在上一步,手机详细页面显示"true"或者"false"来说明某个手机是否具有特定的特性.现在我们使用一个定制的过滤器来把那些文本串图形化:√作为"true":以及×作为"false".来让我们看看过滤器代码长什么样子. 步骤8和步骤9之间最重要的不同在下面列出.你可以在GitHub里看到