angularjs 的select的option是通过循环造成的，循环的方式可能有  ng-option  或 者 <option  ng-repeat></option>option中利用ng-repeat的指令但是传来的下拉列表总是第一行显示的是空的。

一、错误有空白

(一)、代码展示

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>

 </head>

 <body>

 <style>

     select{

         width: 150px;

         height: 30px;

     }

 </style>

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

     <select ng-model="selectedName" ng-options="x for x in names">

     </select>

 </div>

 <p>ng-options 指令的使用。</p>

 </body>

 <script>

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

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

         $scope.names = ["my", "dragon", "boke"];

     });

 </script>

(二)、浏览器展示

如上图展示下拉菜单给开发者获取select的value值带来很大的不便。 所以经过给select的ng-model一个默认的值，或者这样<option value="">请选择</option>这个样子的话，下拉列表里面那个空值就会变成请选择字样，就会去掉空白的option。如下

二、正确处理空白

(一)、代码展示

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>

 </head>

 <body>

 <style>

     select{

         width: 150px;

         height: 30px;

     }

 </style>

 <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 = ["my", "dragon", "boke"];

     });

 </script>

 <p>ng-options 指令的使用。</p>

 </body>

 </html>

(二)、浏览器展示

针对angularjs下拉菜单第一个为空白问题处理的更多相关文章

  1. AngularJS进阶(五)Angular实现下拉菜单多选

    Angular实现下拉菜单多选 写这篇文章时,引用文章地址如下: http://ngmodules.org/modules/angularjs-dropdown-multiselect http:// ...

  2. 第一百三十二节，JavaScript，封装库--下拉菜单

    JavaScript,封装库--下拉菜单 封装库,增加了3个方法 shu_biao_yi_ru_yi_chu()方法,给元素设置鼠标移入移出事件,接收两个参数,参数是移入和移出时的执行函数(包含代码) ...

  3. selenium.common.exceptions.ElementNotVisibleException: Message: element not visible处理方法：selenium针对下拉菜单事件的处理

    使用Selenium爬虫时,可能会遇到一些下拉菜单,动态加载,如果直接使用find_element_by_函数会报错,显示selenium.common.exceptions.ElementNotVi ...

  4. 第一百四十六节，JavaScript，百度分享保持居中--下拉菜单

    JavaScript,百度分享保持居中--下拉菜单 百度分享保持居中 效果图 html代码 <div id="share"> <h2>分享到</h2& ...

  5. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  6. JS列表的下拉菜单组件(仿美化控件select)

    JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...

  7. python selenium-webdriver 下拉菜单处理 （九）

    测试过程中经常遇到下来菜单,比如说分页,每页显示的条数,以及语言的切换,很多时候经常是以下来菜单的形式展现,下面我们看一下selenium如何处理下来菜单. 首先selenium 很人性化的给提供了一 ...

  8. 有序无序Ul->Li Ol->Li菜单，默认点击当前弹出下拉，再次点击收起下拉菜单(变形2 ---修饰)

    从上面可以看出,两个问题,第一:下拉出现的太快太突然,第二:再点击下一个下拉菜单的时候,上一个不会闭合,针对这两个问题,接下来会一 一解决. 解决下拉太快: js中有个jquery效果,有一个效果是j ...

  9. 如何在webapp中做出原生的ios下拉菜单效果

    github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...

随机推荐

  1. scale 和 zoom，以及zoom的一些变态用法

    zoom和scale这两个东西都是用于对元素的缩放,一下是其中一些区别: 1.scale的缩小是以图片的中心,zoom的缩小是以图片的左上角. 2.zoom的缩放改变了元素占据的空间大小:而scale ...

  2. Stage1--Python的特点和安装

    说在前面: Stage1-Stage4简单介绍一下Python语法,Stage5开始用python实现一些实际应用,语法的东西到处可以查看到,学习一门程序语言的最终目的是应用,而不是学习语法,语法本事 ...

  3. sharepoint2007就地升级2010系列（一）2007概览

    大家可能熟悉了sharepoint2010,熟悉了sharepoint2013,做了N多个项目,但是有没有做过从sharepoint2007升级或者迁移到sharepoint2010的项目呢?我们做实 ...

  4. 在Eclipse安装Genymotion插件的经验心得

    个人心得分享,不当之处还请指正. Eclipse自带的Android模拟器已经无力吐槽了,新手刚上手时或许配置完环境已经精疲力尽了,或许还沉浸在开发成功的喜悦当中,对AVD模拟器的运行情况关注不大,渐 ...

  5. Azure镜像市场再下一城，中标软件入驻开启Azure国产操作系统时代

    近日,中标软件成功入驻 Azure 镜像市场,提供中标麒麟 Linux 的产品镜像服务,这样一来,中标麒麟也成为国内唯一能够在 Azure 公有云上运行的国产操作系统产品. 作为国内操作系统的领头羊, ...

  6. 模拟精灵 z

    反复做历史测试,重大改进了卖出的判断模式.此项改进能使系统收益每年增加5%-左右 重新整合了几种买法,使之在熊市更加谨慎.对大盘的反转反应更为灵敏 适当加大了仓位 单独处理有重大机会的股票 加入多种短 ...

  7. Angular-cli 构建应用的一些配置

    Angular-cli 构建应用 的一些配置 标签(空格分隔): Angular 直接使用 ng build --prod --build-optimizer --base-href=/ 来发布 ba ...

  8. Python之List和Tuple类型(入门3)

    转载请标明出处: http://www.cnblogs.com/why168888/p/6407682.html 本文出自:[Edwin博客园] Python之List和Tuple类型 1. Pyth ...

  9. IOS CoreLocation框架的使用(用于地理定位)

    ●  在移动互联网时代,移动app能解决用户的很多生活琐事,比如 ●  导航:去任意陌生的地方 ●  周边:找餐馆.找酒店.找银行.找电影院 ●  在上述应用中,都用到了地图和定位功能,在iOS开发中 ...

  10. 【BZOJ1171】大sz的游戏（线段树+单调队列）

    点此看题面 大致题意: 有\(n\)个点,两点间最大通讯距离为\(L\).已知除\(1\)号点外第\(i\)个点能够发出和接收的信号区间\([l_i,r_i]\)以及到\(1\)号点的距离\(dis_ ...