AngularJS Select(选择框)

使用 ng-options 创建选择框

在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出，如下实例:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="angular-1.6.3/angular.js"></script>

</head>

<body>

<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','baidu','tengxun'];

    })

</script>

</body>

</html>

ng-init 初始值，ng-options="x for x in names"读取数组

使用 ng-repeat 创建选择框

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="angular-1.6.3/angular.js"></script>

</head>

<body>

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

   <select>

       <option ng-repeat="x in names">{{x}}</option>

   </select>

</div>

<script>

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

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

        $scope.names=['google','baidu','tengxun'];

    })

</script>

</body>

</html>

ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：

使用 ng-options 的选项是一个对象， ng-repeat 是一个字符串。当选择值是一个对象时，我们就可以获取更多信息，应用也更灵活。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="angular-1.6.3/angular.js"></script>

</head>

<body>

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

   <select ng-model="selectedSite">

       <option ng-repeat="x in names" value="{{x.url}}">{{x.site}}</option>

   </select>

    <h1>你选择的是: {{selectedSite}}</h1>　　　

</div>

<script>

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

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

        $scope.names=[ {site : "Google", url : "http://www.google.com"},

            {site : "Runoob", url : "http://www.runoob.com"},

            {site : "Taobao", url : "http://www.taobao.com"}];

    })

</script>

</body>

</html>

你选择的是: http://www.runoob.com---->字符串

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="angular-1.6.3/angular.js"></script>

</head>

<body>

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

   <select ng-model="selectedSite" ng-options="x.site for x in names">

   </select>

    <h1>你选择的是: {{selectedSite}}</h1>

</div>

<script>

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

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

        $scope.names=[ {site : "Google", url : "http://www.google.com"},

            {site : "Runoob", url : "http://www.runoob.com"},

            {site : "Taobao", url : "http://www.taobao.com"}];

    })

</script>

</body>

</html>

你选择的是: {"site":"Google","url":"http://www.google.com"}---->对象

数据源为对象

使用对象作为数据源, x 为键(key), y 为值(value):

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="angular-1.6.3/angular.js"></script>

</head>

<body>

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

   <select ng-model="selectedSite" ng-options="x for (x,y) in names">

   </select>

    <h1>你选择的是: {{selectedSite}}</h1>

</div>

<script>

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

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

        $scope.names= {site1 : "Google", site2 : "http://www.google.com"};

    })

</script>

</body>

</html>

你选择的是: Google

你选择的值为在 key-value 对中的 value。

value 在 key-value 对中也可以是个对象：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="angular-1.6.3/angular.js"></script>

</head>

<body>

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

   <select ng-model="selectedSite" ng-options="x for (x,y) in names">

   </select>

    <h1>你选择的是: {{selectedSite}}</h1>

</div>

<script>

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

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

        $scope.names= {car01 : {brand : "Ford", model : "Mustang", color : "red"},

            car02 : {brand : "Fiat", model : "500", color : "white"},

            car03 : {brand : "Volvo", model : "XC90", color : "black"}};

    })

</script>

</body>

</html>

你选择的是: {"brand":"Ford","model":"Mustang","color":"red"}

在下拉菜单也可以不使用 key-value 对中的 key , 直接使用对象的属性，但是选项还是value：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="angular-1.6.3/angular.js"></script>

</head>

<body>

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

   <select ng-model="selectedSite" ng-options="y.brand for (x,y) in names">

   </select>

    <h1>你选择的是: {{selectedSite}}</h1>

</div>

<script>

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

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

        $scope.names= {car01 : {brand : "Ford", model : "Mustang", color : "red"},

            car02 : {brand : "Fiat", model : "500", color : "white"},

            car03 : {brand : "Volvo", model : "XC90", color : "black"}};

    })

</script>

</body>

</html>

你选择的是: {"brand":"Ford","model":"Mustang","color":"red"}

AngularJS学习篇（十）的更多相关文章

  1. AngularJS学习篇（二十四）

    AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...

  2. AngularJS学习篇（二十二）

    AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...

  3. AngularJS学习篇（二十）

    AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...

  4. AngularJS学习篇（十九）

    AngularJS Bootstrap 可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link r ...

  5. AngularJS学习篇（十八）

    AngularJS API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访 ...

  6. AngularJS学习篇（十六）

    AngularJS 表单 HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 HTML 表单 H ...

  7. AngularJS学习篇（十五）

    AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 创建模块 你可以通过 AngularJS 的 angular. ...

  8. AngularJS学习篇（十四）

    AngularJS 事件 ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. <!DOCTYPE html> <html> <head& ...

  9. AngularJS学习篇（十二）

    AngularJS SQL ASP.NET 中执行 SQL 获取数据 <!DOCTYPE html> <html> <head> <meta charset= ...

随机推荐

  1. 基于NIO和BIO的两种服务器对比

    基于BIO的服务器,服务端可能要同时保持几百万个HTTP连接,而这些连接并不是每时每刻都在传输数据,所以这种情况不适合使用BIO的服务器:而且需要保证共享资源的同步与安全,这个实现起来相对复杂.这时候 ...

  2. 说下browserslist

    browserslist 是一个开源项目 见到有些package.json里会有如下的配置参数 "browserslist": [ "> 1%", &qu ...

  3. 教育，创新，提升：Indiegogo和Kickstarter上受中国用户支持的10个众筹项目

    中国的经济正在迅速发展,已成为世界第二大经济体.中国家庭随着经济水平的提高,越来越多父母愿意将自己的子女送到海外留学. 家长们希望自己的子女可以有机会接受国外大学优质的教育, 以便他们将来可以学成归来 ...

  4. 打印ASCII码

    总时间限制:1000ms内存限制:65536kB 描述 输入一个除空格以外的可见字符(保证在函数scanf中可使用格式说明符%c读入),输出其ASCII码. 输入 一个除空格以外的可见字符. 输出 一 ...

  5. Cornfields poj2019 二维RMQ

    Cornfields Time Limit:1000MS     Memory Limit:30000KB     64bit IO Format:%I64d & %I64u Submit S ...

  6. S2_SQL_第一章

    第一章:数据库的设计 1.1:为什么需要规范数据库的设计 1.1.1:什么是数据库设计 数据库设计就是将数据中的数据实体及这些数据实体之间的关系,进行规范和结构的过程. 1.1.2:数据库设计非常重要 ...

  7. http://codeforces.com/contest/845

    A. Chess Tourney time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  8. Maven打包Jar

    现状 该项目使用了Maven,并且引入了Spring,包含代码.配置文件.Jar包,使用的是IDEA来作为开发工具,项目的产出物是要打包成一个可运行的Jar包.通过IDEA的打包工具也可以打包成功,只 ...

  9. Python系列之文件操作、冒泡算法、装饰器、及递归

    文件处理 python对文件进行读写操作的方法与具体步骤,包括打开文件.读取内容.写入文件.文件中的内容定位.及关闭文件释放资源等 open().file(),这个两函数提供了初始化输入\输出(I\O ...

  10. 关于SEO的一些见解---关键词的选取布局以及内外链的建设

    前言     SEO是英文 Search EngineOptimiation的缩写,中文翻译为"搜索引擎优化"简单地说, SEO就是从搜索引擎上获得流量的技术 . 搜索引掌优化的主 ...