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. php 168任意代码执行漏洞之php的Complex (curly) syntax

    今天了解了php 168的任意代码执行漏洞,Poc: http://192.168.6.128/pentest/cms/php168/member/post.php?only=1&showHt ...

  2. [Abp 源码分析]十五、自动审计记录

    0.简介 Abp 框架为我们自带了审计日志功能,审计日志可以方便地查看每次请求接口所耗的时间,能够帮助我们快速定位到某些性能有问题的接口.除此之外,审计日志信息还包含有每次调用接口时客户端请求的参数信 ...

  3. Linux命令之sftp - 安全文件传输命令行工具

    用途说明 sftp命令可以通过ssh来上传和下载文件,是常用的文件传输工具,它的使用方式与ftp类似,但它使用ssh作为底层传输协议,所以安全性比ftp要好得多. 常用方式 格式:sftp <h ...

  4. ubuntu16.04 Golang语言开发环境搭建

    golang即go语言是跨平台的语言,适用于windows 和linux平台,下面介绍linux平台下ubuntu16.04系统下的开发环境搭建过程. 一.安装开发必备环境 执行下面命令分别安装git ...

  5. 用tensorflow学习贝叶斯个性化排序(BPR)

    在贝叶斯个性化排序(BPR)算法小结中,我们对贝叶斯个性化排序(Bayesian Personalized Ranking, 以下简称BPR)的原理做了讨论,本文我们将从实践的角度来使用BPR做一个简 ...

  6. 你以为的MongoDB副本集的高可用是真的高可用了吗?

    很久没来更新博客,自感是一个只会搬砖的劳工,总搞些MySQL相关的数据库实在无聊,且时不时遇到些不讲道理的Dev吧,真的是心累至极,有种想回头我也去干开发的冲动,当个需求者有话语权要风得风,要雨得雨多 ...

  7. MySQL 索引及查询优化总结

    本文由云+社区发表 文章<MySQL查询分析>讲述了使用MySQL慢查询和explain命令来定位mysql性能瓶颈的方法,定位出性能瓶颈的sql语句后,则需要对低效的sql语句进行优化. ...

  8. 网页数据抓取工具，webscraper 最简单的数据抓取教程，人人都用得上

    Web Scraper 是一款免费的,适用于普通用户(不需要专业 IT 技术的)的爬虫工具,可以方便的通过鼠标和简单配置获取你所想要数据.例如知乎回答列表.微博热门.微博评论.淘宝.天猫.亚马逊等电商 ...

  9. Asp.Net Core中使用MongoDB的入门教程,控制台程序使用 MongoDB

    内容来源  https://blog.csdn.net/only_yu_yy/article/details/78882446 首先,创建一个.Net Core的控制台应用程序.然后使用NuGet导入 ...

  10. C# 如何隐藏或显示工作表中的网格线

    我们知道Excel中有许多虚线形式的网格线,它们用于区分Excel工作表中的单元格.有了网格线,读者可以轻松地查看和核对工作表中的数据.Excel工作表中,网格线是默认存在的,但我们可以根据自身的需求 ...