AngularJS使用ng-options指令实现下拉框
作者：翱翔天地
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了AngularJS使用ng-options指令实现下拉框效果，ng-option指令使用也很简单，下文具体给大家说明，对angularjs 下拉框知识感兴趣的朋友一起看下吧
ng-option指令使用很简单，只需要绑定两个属性：
一个是ng-model用于获取选定的值；
另一个是ng-options用于确定下拉列表的元素数组。
1、问题背景
一般情况下，select下都会有option，但是AngularJS中有指令ng-options，就可以实现select下拉框
2、实现源码
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&AngularJS之下拉框（方式一）&/title&
&script type="text/javascript" src="../js/angular.min.js" &&/script&
var app = angular.module("selApp",[]);
app.controller("selCon",function($scope){
$scope.options = ["第一季度","第二季度","第三季度","第四季度"];
&div ng-app="selApp" ng-controller="selCon"&
&select ng-model="selectedName" ng-options="x for x in options" style="width: 180"&
3、问题说明
&option&&/option&
利用指令ng-options，可以省略&option&&/option&
以上所述是小编给大家介绍的AngularJS使用ng-options指令实现下拉框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具3490人阅读
ionic（24）
转载（143）
angular.js和ionic框架搭建一个webApp
注：本文适合对angular.js有基础的同学
这是本系列文章的开篇，本系列文章均是转载，目的是方便自己查阅，并且以后方便改动
AngularJS简介：&是一个为动态WEB应用设计的结构框架，提供给大家一种新的开发应用方式，这种方式可以让你扩展HTML的语法，以弥补在构建动态WEB应用时静态文本的不足，从而在web应用程序中使用HTML声明动态内容。
AngularJS有五个主要核心特性，如下介绍：
双向数据绑定—— 实现了把model与view完全绑定在一起，model变化，view也变化，反之亦然。
模板—— 在AngularJS中，模板相当于HTML文件被浏览器解析到DOM中，AngularJS遍历这些DOM，也就是说AuguarJS把模板当做DOM来操作，去生成一些指令来完成对view的数据绑定。
MVVM—— 吸收了传统的MVC设计模式针但又并不执行传统意义上的MVC，更接近于MVVM(Moodel-View-ViewModel)。
依赖注入—— AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。
指令—— 可以用来创建自定义的标签，也可以用来装饰元素或者操作DOM属性
ionic简介：&是一个强大的_混合式/hybrid_HTML5移动开发框架，特点是使用标准的HTML、 CSS和JavaScript，开发跨平台（目前支持：Android、iOS，计划支持：Windows Phone、Firefox OS） 的原生App应用。
ionic主要包括三个部分：
CSS框架- 提供原生_App质感的CSS样式模拟_。ionic这部分的实现使用了ionicons图标样式库。
JavaScript框架- ionic基于AngularJS基础框架开发，遵循AngularJS的框架约束；主要提供了适应移动端UI的 AngularJS的扩展，主要包括指令和服务。此外，ionic使用AngularUI Router来实现前端路由。
命令行/CLI- 命令行工具集用来简化应用的开发、构造和仿真运行。ionic命令行工具使用了 Cordova，依赖于平台SDK（Android & iOS）实现将移动web项目打包成原生app。
由于ionic使用了HTML5和CSS3的一些新规范，所以要求iOS7+/Android4.1+。 在低于这些版本的手机上使用ionic开发的应用，有时会发生莫名其妙的问题。
安装ionic/Install Ionic
首先您需要安装. 其次, 安装最新版本的cordova 和 ionic. 通过参考和官方文档来安装.
npm install -g cordova ionic
通过Ionic创建一个项目
使用Ionic官方提供的现成的应用程序模板，或一个空白的项目创建一个Ionic应用。
ionic start myApp blank &创建一个空白的app项目 （下图1）
ionic start myApp tabs 创建一个带有tabs项目（下图2）
ionic start myApp sidemenu 创建一个带有滑动的项目（下图3）
我现在创建一个空白的项目 ionic start myApp blank
然后我们看到有myApp项目生成。如下目录
然后打开index就能运行项目了
然后我们用浏览器打开index就可以看的如下图的东西了。
index.html
接着下一步，我们用编辑器打开index.html。观察里面所引入的文件，我的习惯把跟项目无关的文件删除了。你可以不删除，我也改动了部分文件的位置，之所以叫你观察里面引入的文件，就是怕你删错了，项目启动不了。改动完结构如下：
其中配置文件，controller，driectives，filter,services,文件都是我新建的。
下面先从app.js说起
这个myApp需要在根节点启动。一个项目建议一个这样的模块。
上述路由config配置是基于,因为在index.html已经引入了ionic.bundle.min.js文件，这个文件把angular.js和及ionic所需的组件都帮我们打包好了，所以引用很方便。
打开这个ionic.bundle.min.js看一下就知道合成了什么东西了，如图：
把6个文件包合成一个了，你可以分别百度看看各是什么包，留给你们思考。
$stateProvider.state(name, {
& & url: '',&
& & templateUrl:'', // 这个是模板位置
& & controller: '' // 这个是对应模板的controller名称！记住是名称不是位置
上述是的基本用法，详情用法可以去查看官方文档。
app.js配置完，下面就配置controller
刚才我们配置完了app.js，我们要新建一个名字叫homeCtrl的controller。命名我建议XXXCtrl或者XXXController，当然以你们项目为标准。
采用闭包的模式创建controller，为了保险防止不必要变量污染的错误。其中
angular.module('myApp') 就是载入刚才创建的模块，然后设置一个叫做homeCtrl的controller，
格式一般都是angular.module('myApp').controller(name, [params, function(params) {}])。
创建完成homeCtrl之后呢，在index.html中引用，如下图：
记得在app.js下面引用
好了，我们根据刚才配置的路由创建完了controller，现在就差模板了。
创建home模板
在刚才创建文档template文件夹当中，新建一个home.html。也就是刚才配置app.js中的路由中写的路径和名字，忘记的回头看看app.js是怎样写的。在刚才创建的home.html，写上以上内容
在项目中我们这样写着，凡是带有&ion-xxx&&/ion-xxx&都是框架自带的。这是一个指令，如果你还不明白指令什么意思，没关系。你就当做一个带有某些功能的自定义标签。
创建home.html模板和homeCtrl.js之后。我们试着启动，在浏览器中打开index.html这个文件，这个文件作为一个项目的入口。ion-view就是这个页面的顶层，所有内容都在这个view中，ion-header就是那个头部，ion-content就是内容。这些都不是必须的，但是我建议这样写，因为ionic有些组件是需要在这些标签里面才能起作用的。然后看到如下图：
index.html
当看到页面和控制台都出现“hello world”文字，证明我们成功了，项目启动成功。
创建app.js和html模板及homeCtrl模板总结
其实我们写项目的思路：举刚才那个例子
1、创建一个app.js，首先能启动项目，然后配置路由。其中路由需要模板和controller那么问题来了，接着看2、3、步。
2、然后创建模板，XXX.html模板。
3、最后创建XXXCtrl.js的controller。
编写控制器与模板
下面来点有意思的吧，先来个轮播图。那就用ionic框架自带的吧，具体查文档即可，如下图：
添加如下html
刷新浏览器如下图：
多了banner
好了，这证明我们成功了，可以滑动，可以自带切换。其实还有很多功能，可以查阅文档尝试。一般由于手机网站banner都是从后台读取数据的，那么我们来改写。在controller获取数据，然后赋值给$scope变量，由于页面和对应controller的$scope有关联，所以对应页面上的属性也会变好，是不是还是不太明白，那么来看代码吧。homeCtrl如下:
我们把代码改成
1、ng-repeat=&item in views.slideData track by $index&，意思就是从$scope.views.slideData数组遍历，item是数组里面的某一项，track by $index其实是性能优化，后续会讲，你也可以不写直接ng-repeat=&item in views.slideData&
2、之前由&img src=&路径&& 这种变成 &&img ng-src=&{{item}}&,其中ng-src是一个angular自带的指令，item是数组遍历出来的路径
从服务器获取数据
啰嗦的话不说了，直接上案例。如图：
获取数据，输出到列表
既然要数据，那么先建一个服务，使用 angular.module 的 factory API创建服务，是最常见也是最灵活的方式。其实还有几种
constant()
provider()
，具体详情查文档，不过多数项目用这种（factory）创建方法就满足需求了。举个简单例子
factory() 方法是创建和配置服务的最快捷方式。 factory() 函数可以接受两个参数。
name （字符串）
需要注册的服务名。
getFn （函数）
这个函数会在AngularJS创建服务实例时被调用。
angular.module('myApp')
& & .factory('myService', function() {
& & & & return {
& & & & & & 'username': 'auser'
& & & & };
要上我们真实的示例代码了哦，如下图：
这个文件是当初新建的servers。
有同学觉得奇怪了，怎么会是app.factory呢？其实app就是angular.module('myApp',[])，我在app.js文件里面把angular.module('myApp'，[])赋值给全局变量app了。见下图：
我们建好了servers。在index.html里面引入哦：
index.html
好！创建好servers.js，还有在index中引入。那么怎么在controller中调用呢？那我们来看看改写后的controller，如图：
我们创建services到调用services里面的ajax请求都成功了，如何在homeCtrl中获取数据呢？
那就先从services改写开始,如下图：
homeCtrl怎么获取数据？看下图：
调用myFactory.getList()方法为什么后面还跟着一个then的。其实我们使用内置的 $http 服务直接同外部进行通信。 $http 服务只是简单的封装了浏览器原生的 XMLHttpRequest 对象。$http 服务是只能接受一个参数的函数，这个参数是一个对象，包含了用来生成HTTP请求的配置内容。这个函数返回一个promise对象， 由于 $http 方法返回一个promise对象，我们可以在响应返回时用 then 方法来处理回调。如果使用 then 方法，会得到一个特殊的参数，它代表了相应对象的成功或失败信息，还可以接受两个可选的函数作为参数。或者可以使用
success 和 error 回调代替，至于promise对象是什么，这里就不一一叙述了，写起来篇幅比较大，还是留给你们查文档吧。
promise.then(function(resp){
// resp是一个响应对象
}, function(resp) {
// 带有错误信息的resp
// 或者使用success/error方法
promise.success(function(data, status, headers, config){
// 处理成功的响应
// 错误处理
promise.error(function(data, status, headers, config){
// 处理非成功的响应
然后看看控制台输出什么，还是看图：
控制台显示调用接口成功
OK!大功告成，我们可以把这些数据绑定在$scope上，然后渲染到页面。还是看图：
1、创建services并写好里面的服务，然后在index.html引入services。
2、homeCtrl中注入依赖services里面的factory服务，调用里面的方法。
3、在homeCtrl调用factory服务方法，然后获取数据。再把数据赋值给$scope。所以模板也能获取$scope里面的数据，那么页面数据就更新了。
编写过滤器
上面已经教会大家如何建立一个services服务获取数据，但是有时候我们获取数据回来的数据做进一步修改显示在页面，下面假如我们有一个需求，我想把姓名全部变成大写。
1、首先创建一个filter。
2、在index.html引入filter。（这个不说了，请看上面services怎么引入的）
在home.html页面中，姓名这样写。
姓名：{{item.Name | toUpperCaseText}}
变成大写了
那么我现在想把城市变成小写，怎么弄？留给你们一个作业吧。
正如前面所见，创建自定义过滤器非常容易。创建自定义过滤器需要将它放到自己的模块中。过滤器本质上是一个会把我们输入的内容当作参数传入进去的函数。上面只是一个简单的例子，其实就是把数据获取进来，数据进来了，你想怎样处理数据就怎样处理。相当于你小时候，你骗你爸爸妈妈零用钱的时候，钱到你口袋了，至于钱怎么用了，那是你自己的事。当你爸爸妈妈问你拿去干什么的时候，你告诉他了，那就相当于把数据处理完渲染在页面了。过滤器其实内置有很多很好用的，需要的时候时不时的查看文档就行了。用法就是这么简单。
过滤器总结
1、分析需求怎样的数据在页面，查阅内置过滤器是否满足需求。
2、假如需求内置过滤器不能满足，创建filter.js，编写处理数据逻辑。
3、在index.html引入过滤器。在需要用过滤器的加上“|”,例如：{{item.Name | toUpperCaseText}}
页面之间传递数据
当我们写完home.html页面并且完成了homeCtrl，及通过services获取后台服务器的数据，展示到页面,证明我们成功了一个小项目的大部分。你可以想象，一个项目都是获取数据，展示数据（至于怎样展示，点击展示还是默认展示，这是交互性的东西），或者提交数据，提交数据本文并没有说，但是我们已经知道怎样获取了，提交还困难么。都是差不多的原理。自己翻阅文档看看$http的方法就可以解决了。我们下面继续实现一个需求，点击刚才的某一项列表，跳到详情页。
新建一个详情页detail.html，新建一个detailCtrl的控制器，并且配置详情页路由。忘记了的可以看看前面新建home的步骤。（记得在index.html引入detailCtrl哦，否则会报下面的错，看图）
当我们跳转detail路由时候，由于没引入对应的detailCtrl，会报错
下面展示路由配置及detail.html页面和detailCtrl.js
detailCtrl
detail.html
我们配置完路由和新建detail的页面及controller。我们实现点击列表跳转到detail页面，并带上数据。我再啰嗦一次，本文带有&ion-xxx&都是ionic框架自带的，ion-view就是这个页面的顶层，所有内容都在这个view中，ion-header就是那个头部，ion-content就是内容。这些都不是必须的，但是我建议这样写，因为ionic有些组件是需要在这些标签里面才能起作用的。
那我们点击列表
思路就是ng-click=&views.goDetail(item)&; views.goDetail就是跳转到detail页面，跳转路由使用$state.go(&XXX&);XXX代表路由的名称，item就是你点击某一项的数据，看图：
ng-click,home.html中
我们点击列表的时候既可以，可以看到console把item的内容打印出来。
console.log(item)
现在需求要实现下面的详情图。
如何实现从A页面==》B页面，并且把A页面的数据带到B页面。下面来探讨angular页面之间的传递数据方式。下面讲5种方法，可能有更多，但是我选常用的讲。
1、可以用$rootScope顶级作用域，从A页面赋值给$rootScope的某个属性，然后B页面获取数据赋值到页面。
detailCtrl
detail.html
结果，如大家所愿详情页能实现刚才的效果了。
2、在A页面用$state.go(&xxx&, {obj});配置路由参数，然后在B页面用$stateParams对象获取url的参数。
homeCtrl,item是个对象来的，也可以是字符串
detailCtrl
使用这个方法从home页面传递过来的url
3、在services里面建立一个服务，在A页面把数据传递给这个服务，然后在B页面获取这个服务的值。为什么可以这样做？因为services服务里面的方法是共享的，当项目初始化的时候services已经实例化了一次（服务是一个单例对象，在每个应用中只会被实例化一次（被 $injector 实例化），并且是延迟加载的（需要时才会被创建）），所以不存在跳转页面就数据没了。（这个是最佳实践哦，不过也要看业务场景。这个是我最常用的）。
services.js
homeCtrl设置值
detailCtrl
detail.html
detail.html
页面之间的传递数据，以上是常用的3种。下面介绍没那么常用的：
利用localStorage、sessionStorage、cookie在A页面中存值，然后在B页面中获取值，这3个都是可以存储数据。他们之间的区别你们查文档吧，哈哈哈~~~~ 留给你们思考。
数据绑定，从刚一开始从服务获取数据，然后把数据绑定到$scope上，然后在页面输入{{}}花括号输出，这种就是数据绑定了。那我们来个假设，现在有个输入框，输入框是多少，列表中的那个人的年龄是多少。
由于这个需求，就是双向数据绑定，可以ng-model用绑定一个变量，这个变量赋值给年龄，那么年龄也跟着变了。看下图：
detailCtrl.js
detail.html
好啦好啦，初始化做完了。下面呢，我们在input输入框值，改变一下input框里面的值，看看有什么变化。
输入框里面的值改变了，上面的年龄值也改变了。证明$scope.views.age的值改变了，这些就是数据绑定了。
数据绑定总结
当AngularJS认为某个值可能发生变化时，它会运行自己的事件循环来检查这个值是否变“脏”。如果该值从上次事件循环运行之后发生了变化，则该值被认为是“脏”值。这也是Angular可以跟踪和响应应用变化的方式。这个事件循环会调用$digest()循环（这个你们查查文档就能知道了）。这个过程被称作脏检查（dirty checking）。脏检查是检查数据模型变化的有效手段。当有潜在的变化存在时，AngularJS会在事件循环时执行脏检查（查阅文档）来保证数据的一致性。
另附：ionic框架的帮助文档&http://www.ionic.wang/js_doc-index-id-13.html
相关资源网址：
1&http://www.ionic.wang/ & & &ionic框架中文网
2&/ & &RequireJs中文网
--- end ---
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1698861次
积分：17799
积分：17799
排名：第427名
原创：211篇
转载：445篇
评论：250条
(4)(6)(5)(11)(6)(9)(6)(4)(33)(6)(7)(6)(5)(1)(10)(4)(2)(8)(7)(16)(8)(2)(4)(7)(4)(4)(14)(8)(20)(59)(7)(9)(3)(6)(5)(5)(5)(28)(5)(1)(1)(4)(5)(4)(4)(12)(6)(12)(11)(1)(10)(1)(1)(3)(4)(4)(2)(6)(7)(10)(7)(9)(3)(4)(3)(1)(10)(8)(8)(9)(4)(9)(10)(4)(2)(8)(1)(1)(1)(1)(1)(3)(3)(3)(3)(4)(14)(25)(7)(13)(8)(15)(26)ionic+angularjs 学习笔记_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
ionic+angularjs 学习笔记
上传于|0|0|文档简介
&&想学习ionic+angularjs 的初学者可以看看哦!
阅读已结束，如果下载本文需要使用3下载券
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩16页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢select在每个平台上,选择框的表现形式都不一样,例如,在PC上,是一个传统的下拉框,在A... link rel= stylesheet type= text/css href= ionic.min.css
div class= bar bar-h.../article-382-1.html
ionic select 的 select 相比原生的要更加美观些。但是弹出的可选选项样式是浏览.每个平... ionic 上拉菜单 ionic 背景层 ionic 下拉刷新 ionic 复选框 ionic 单选框操作.你可以用$ion...hao123.0554.us/m/k/ionic%20%E4%B8%8B%E6%8B%89%E6%A...
原因是因为没有初始化select的值
简单粗暴的解决是:加一个 option value= 请选择 /option
NWCAAC项目的解决办法: 在该页面的控制器里找到下拉数据设置 $scope.search = ...blog.csdn.net/wenjimmy/article/details/
日&-&...学了一段时间的angularjs,发现还是比较容易上手的,里面有很多地方,的确震撼了自己。这里就简单的介绍一下angularjs中ng-select和ng-options...&...&移动开发&Android-快照-红黑联盟/kf/329.html
原创作者：xiaojun_zxj建议对ionic和AnjularJs有一定了解的人可以用到,很多时候我们要用到选择省份、城市、... div class= list div class= list style= border: 0; label class= item item-input item-select styl.../xiaojun-zxj/p/4766704.html
选择框 : .item-select select 在每个平台上,选择框的表现形式都不一样,例如,在PC上,是一个传统的下拉框,在Android是一个单选弹出窗,而iOS上是一个覆盖半个窗体的定制滚动器...my.oschina.net/u/2395167/blog/492241
Ionichina:全球最大的 Ionic Framework中文社区
fate1009 积分: 5
“ 这家伙很懒,什么个... 下拉
select option 1 /option option selected 2 /option option 3 /option /select /label
/bo.../topic/56e26ace962af
我们经常要使用select ,但select的大小会随着内容的大小而变化。很烦人啊。网上有人... select的widt.
ThinkSAAS开源社区
首页 小组 Jquery 讲述下拉框自己的故事——解决h.../topics/0/229/229739.html
ionic select 级联 js模拟级联select城市地址选择
这里效果不像select而模拟... 用css设置select下拉框的高度时,在Android下无效,不得不使用hack骈解决,本文我们讲一.../ionic-select/
最近在ionic程序在安卓的微信x5内核中发现下拉的select不容易被点击到,有一定几率能点出下拉框,在ios和原生内核并没有发现此类问题,测试后发现只有在没有引入ionic.bund.../q/5058
搜索结果不满意？切换：