1.AngularJS可以使用数组或对象创建一个下拉列表选项;

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

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

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

3.ng-options与ng-repeat:也可以使用ng-repeat指令创建下拉列表:

<select>

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

</select>

**ng-repeat指令是通过数组来循环HTML代码来创建下拉列表,但ng-options指令更适合创建下拉列表:使用ng-options的选项的一个对象, ng-repeat是一个字符串;

4.比较ng-repeat和ng-options

**使用以下对象:

$scope.sites=[

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

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

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

];

**ng-repeat:

<select ng-model="selectedSite">

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

</select>

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

**使用ng-options:

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

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

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

5.数据源为对象:前边使用数组作为数据源,以下将数据对象作为数据源;

$scope.sites=[

  site01:"Google",

  site02:"Runoob",

  site03:"Taobao"

];

**ng-options使用对象有很大不同:使用对象作为数据源,x为键(key),y为值(value):

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

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

**你选择的值为在key-value对中的value;value在key-value对中也可以是个对象:

$scope.cars={

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

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

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

};

**在下拉菜单中也可以不使用key-value对中的key,直接使用对象的属性:

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

AngularJS学习之Select(选择框)的更多相关文章

  1. AngularJS初始化Select选择框

    一.引入 之前一个离职的同事负责的项目大量的引入了AngularJS的JS框架,后来我接手相关他项目里的功能.由于对AngularJS不是太熟,在他的功能上进行二次开发就比较费劲了,印象比较深的一个就 ...

  2. Notes: select选择框

    HTML选择框通过select标签创建,该元素是HTMLSelectElement的实例,拥有以下属性和方法: selectedIndex:选中项的索引 options:选择框的所有选项 add:向选 ...

  3. 类似 select 选择框效果及美化

    网上有各种各样的关于 select 选择框的美化,找了很多,并没有好的样式效果.所以就找了一个利用 ul li 做的类似 select 选择框的效果,不废话了,先上图,效果如下: 对于上图的箭头效果, ...

  4. Android较低版本(<5.2) 页面默认Select选择框效果的BUG解决

    Bug描述: 使用低版本安卓(<5.2),在微信上打开网页,点击下拉框,会出现如下图所示的用来展示select选项的弹出框: 在选项较少的时候,可以向下滑动,将选项滑到底部 滑动前: 滑动后: ...

  5. select选择框在谷歌火狐和IE样式的不同

    select选择在不同浏览器不同的显示样式, 在IE中 虽然默认和谷歌一样,但是当点击时向下 按钮消失, 解决方法如下: select { /*Chrome和Firefox里面的边框是不一样的,所以复 ...

  6. Chosen:Select 选择框的华丽变身

    HTML Form 表单里的各种组件,例如文本输入框,textarea,按钮等,都可以通过CSS或其它技术进行美化,让它们看起来很漂亮了,唯独下拉列表选项框(select box),不管你怎么做,它摆 ...

  7. select选择框实现跳转

    select选择框实现跳转 零.启示 1.启示把bom里面的几个对象稍微有点印象,那么主干有了,学其它的就感觉添置加瓦,很简单 就是关注树木的主干 2.万能的百度,不过当然要你基础好学得多才能看得懂, ...

  8. iiview Select 选择框打勾选中的内容label和展示的不一致

    Select选择框里加入了OptionGroup.option ; 以及input输入框支持模糊搜索: 不一致的原因:缺少  :label-in-value="true";官方文档 ...

  9. AngularJS Select(选择框)

    AngularJS 可以使用数组或对象创建一个下拉列表选项. 使用 ng-option 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和 ...

  10. 修改页面中显示出需要修改的数据(包括select选择框复显示)

    页面中需要用到某个对象时,在底层代码中赋值,然后页面用java代码进行获取调用 如下截图: select复显示:根据后台方法赋值选择框 ,并设置初始值 按钮及选择框的禁用(五种方法): 方法一: $( ...

随机推荐

  1. 【leetcode】Combination Sum III(middle)

    Find all possible combinations of k numbers that add up to a number n, given that only numbers from ...

  2. Google140道面试题

    FQ找来,可能历史比较悠久了,慢慢看. 原文连接:http://www.impactinterview.com/2009/10/140-google-interview-questions/ Goog ...

  3. SQLServer视图

    视图简介:通过定义 SELECT 语句以检索将在视图中显示的数据来创建视图.SELECT 语句引用的数据表称为视图的基表.在SQL Server 2005系统中,可以把视图分为3种类型,即标准视图,索 ...

  4. ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(八) 之 用 Redis 实现用户在线离线状态消息处理

    前言 上篇的预告好像是“聊天室的小细节,你都注意到了吗?”.今天也是为那篇做铺垫吧.之前的版本有好多问题,比如:当前登录用户是否合法问题,userid参数如果随便传后台没有验证.还有一个致命的问题,用 ...

  5. 在MVC的项目中访问静态页面

    MVC在生成项目的时候会生成的WEB-INF底下.这个文件夹下面的文件是受保护的,都会走MVC的流程, 但是我希望在WebContent底下可以使用静态页面, 那么需要进入springmvc-serv ...

  6. java web统计当前访问用户数量

    1.使用SessionListener监听器,监听创建与销毁session的操作,利用计数方式记录当前session的数量

  7. Android ArrayAdapter使用

    1. 可以直接使用getContext()获取Context对象 2. 可以在构造方法中传入context, 数据对象的列表, super(context, 0, object);完成Adapter的 ...

  8. Django环境配置

    Django安装 #安装最新版本的Django $ pip install django #或者指定安装版本 pip install -v django==1.7.1 项目创建 $ django-ad ...

  9. AngularJS 控制器 ng-controller

    AngularJS 控制器 控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的 JavaScript 对象. AngularJS 应用程序被控制器控制. ng-contro ...

  10. Python 自然语言处理(1) 计数词汇

    Python有一个自然语言处理的工具包,叫做NLTK(Natural Language ToolKit),可以帮助你实现自然语言挖掘,语言建模等等工作.但是没有NLTK,也一样可以实现简单的词类统计. ...