1、AngularJS Select(选择框)
　　AngularJS 可以使用数组或对象创建一个下拉列表选项。
　　　　ng-option：创建一个下拉列表，列表项通过对象和数组循环输出
　　　　　　eg：

<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", "Runoob", "Taobao"];

});

</script>

　　ng-repeat：通过数组来循环 HTML 代码来创建下拉列表
　　　　eg：

<select>

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

</select>

2、ng-option比ng-repeat更适合创建下拉列表的优势

　　使用 ng-options 的选项是一个对象， ng-repeat 是一个字符串。

　　实例1

　　

$scope.sites = [

    {site : "Google", url : "http://www.google.com"},

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

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

];
<select ng-model="selectedSite">

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

</select>

<h1>你选择的是: {{selectedSite}}</h1>
<select ng-model="selectedSite" ng-options="x.site for x in sites">

</select>

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

<p>网址为: {{selectedSite.url}}</p>

　　实例2

$scope.sites = {

    site01 : "Google",

    site02 : "Runoob",

    site03 : "Taobao"

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

</select>

<h1>你选择的值是: {{selectedSite}}</h1>
$scope.cars = {

car01 : {brand : "Ford", model : "Mustang", color : "red"},

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

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

};
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">

</select>

3、代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="js/angular.min.js"></script>

</head>

<body>

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

        <!-- 使用 ng-options 创建选择框 -->

        <div>

            <h2>使用 ng-options 创建选择框</h2>

            <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"></select>

            <select ng-model="selectSite" ng-options="s.site for s in sites track by it.url"></select>

            <h4>你选择的是: {{selectSite.site}}</h4>

            <p>网址为: {{selectSite.url}}</p>

            <select ng-model="selectedCar" ng-options="y.brand for (x,y) in cars"></select>

            <h4>你选择的是: {{selectedCar.brand}}</h4>

            <h4>模型: {{selectedCar.model}}</h4>

            <h4>颜色: {{selectedCar.color}}</h4>

        </div>

        <p></p>

         <!-- 使用 ng-repeat 创建选择框 -->

        <div>

            <h2>使用 ng-repeat 创建选择框</h2>

            <select>

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

            </select>

            <select ng-model="selectedSite">

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

            </select>

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

        </div>

    </div>

</body>

</html>

<script>

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

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

        $scope.names = ["Google", "baidu", "Taobao"];

        $scope.sites = [

            {site : "Google", url : "http://www.google.com"},

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

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

        ];

        $scope.cars = {

            car01 : {brand : "Ford", model : "Mustang", color : "red"},

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

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

        };

    });

</script>

AngularJS学习之旅—AngularJS Select(十)的更多相关文章

  1. AngularJS学习之旅—AngularJS 模块(十五)

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

  2. AngularJS学习之旅—AngularJS 控制器(六)

    1.AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript ...

  3. AngularJS学习之旅—AngularJS 指令(三)

    1.AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令.2.Angu ...

  4. AngularJS学习之旅—AngularJS 表达式(二)

    1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙 ...

  5. AngularJS学习之旅—AngularJS 表单(十六)

    一.AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button ...

  6. AngularJS学习之旅—AngularJS 事件(十四)

    1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input, ...

  7. AngularJS学习之旅—AngularJS SQL(十二)

    一.使用 PHP 从 MySQL 中获取数据 <div ng-app="myApp" ng-controller="customersCtrl"> ...

  8. AngularJS学习之旅—AngularJS 模型(四)

    1.AngularJS ng-model 指令 1.ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. 2.ng-model 指令可 ...

  9. AngularJS学习之旅—AngularJS HTML DOM(十三)

    1.AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令:ng-disabled 指令直接绑定应用程序数据 ...

随机推荐

  1. 当使用vue的按键修饰符不起效果的时候怎么办?如@keyup.enter = '' ;

    这个问题困扰了我一个多小时,各种测bug !始终测不出来! 直接上代码(错误示范) <el-form-item prop="password"> <el-inpu ...

  2. 95%的技术面试必考的JVM知识点都在这，另附加分思路！

    概述:知识点汇总 jvm的知识点汇总共6个大方向:内存模型.类加载机制.GC垃圾回收是比较重点的内容.性能调优部分偏重实际应用,重点突出实践能力.编译器优化和执行模式部分偏重理论基础,主要掌握知识点. ...

  3. iOS学习——核心动画

    iOS学习——核心动画 1.什么是核心动画 Core Animation(核心动画)是一组功能强大.效果华丽的动画API,无论在iOS系统或者在你开发的App中,都有大量应用.核心动画所在的位置如下图 ...

  4. C# 多线程学习笔记 - 1

    本文主要针对 GKarch 相关文章留作笔记,仅在原文基础上记录了自己的理解与摘抄部分片段. 遵循原作者的 CC 3.0 协议. 如果想要了解更加详细的文章信息内容,请访问下列地址进行学习. 原文章地 ...

  5. 1.python简介

    简介 1.python语言介绍 python的创始人:Guido Van Rossum 2.python是一门什么样的语言 编程语言主要从以下几个角度进行分类:编译型,静态型,动态性,强类型定义语言和 ...

  6. 【java设计模式】（5）---装饰者模式（案例解析）

    设计模式之装饰者模式 一.概念 1.什么是装饰者模式 装饰模式是在不使用继承和不改变原类文件的情况下,动态的扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象.    这一个解释 ...

  7. C#计算一段代码的运行时间

    第一种方法利用System.DateTime.Now: static void SubTest() { DateTime beforDT = System.DateTime.Now; //耗时巨大的代 ...

  8. 使用Genymotion遇到的坑_Genymotion无法启动_unable to start the virtual device

    Genymotion 十分好用,以下是我使用Genymotion碰到的问题及解决办法.目前没有看到网上有完整的解决. 遇到如下图的问题: 这个问题很多人可能回去百度“the virtual devic ...

  9. Java基础19：Java集合框架梳理

    更多内容请关注微信公众号[Java技术江湖] 这是一位阿里 Java 工程师的技术小站,作者黄小斜,专注 Java 相关技术:SSM.SpringBoot.MySQL.分布式.中间件.集群.Linux ...

  10. 前端笔记之JavaScript（十）深入JavaScript节点&DOM&事件

    一.DOM JavaScript语言核心.变量的定义.变量的类型.运算符.表达式.函数.if语句.for循环.算法等等.这些东西都属于语言核心,下次继续学习语言核心就是面向对象了.JavaScript ...