针对angularjs下拉菜单第一个为空白问题处理
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下拉菜单第一个为空白问题处理的更多相关文章
- AngularJS进阶(五)Angular实现下拉菜单多选
Angular实现下拉菜单多选 写这篇文章时,引用文章地址如下: http://ngmodules.org/modules/angularjs-dropdown-multiselect http:// ...
- 第一百三十二节，JavaScript，封装库--下拉菜单
JavaScript,封装库--下拉菜单 封装库,增加了3个方法 shu_biao_yi_ru_yi_chu()方法,给元素设置鼠标移入移出事件,接收两个参数,参数是移入和移出时的执行函数(包含代码) ...
- selenium.common.exceptions.ElementNotVisibleException: Message: element not visible处理方法：selenium针对下拉菜单事件的处理
使用Selenium爬虫时,可能会遇到一些下拉菜单,动态加载,如果直接使用find_element_by_函数会报错,显示selenium.common.exceptions.ElementNotVi ...
- 第一百四十六节，JavaScript，百度分享保持居中--下拉菜单
JavaScript,百度分享保持居中--下拉菜单 百度分享保持居中 效果图 html代码 <div id="share"> <h2>分享到</h2& ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- JS列表的下拉菜单组件(仿美化控件select)
JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...
- python selenium-webdriver 下拉菜单处理 （九）
测试过程中经常遇到下来菜单,比如说分页,每页显示的条数,以及语言的切换,很多时候经常是以下来菜单的形式展现,下面我们看一下selenium如何处理下来菜单. 首先selenium 很人性化的给提供了一 ...
- 有序无序Ul->Li Ol->Li菜单，默认点击当前弹出下拉，再次点击收起下拉菜单(变形2 ---修饰)
从上面可以看出,两个问题,第一:下拉出现的太快太突然,第二:再点击下一个下拉菜单的时候,上一个不会闭合,针对这两个问题,接下来会一 一解决. 解决下拉太快: js中有个jquery效果,有一个效果是j ...
- 如何在webapp中做出原生的ios下拉菜单效果
github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...
随机推荐
- phpmyadmin杂记
看着坑爹的教程..我老是报错我也很无奈啊 以下几项必改 $cfg['blowfish_secret'] = ' ';//这里引号内是空格,实际上可以是任意内容, $cfg['Servers'][$i] ...
- 软件项目技术点(2)——Canvas之平移translate、旋转rotate、缩放scale
AxeSlide软件项目梳理 canvas绘图系列知识点整理 画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transf ...
- JavaScript彻底搞懂apply和call方法
彻底搞懂JavaScript中的apply和call方法 call和apply都是为了改变某个函数运行的context上下文而存在的,即为了改变函数体内部this的指向.因为JavaScript的函数 ...
- RePlugin 插件化-内置加载
PS:插件化是什么这里就不再说了,从这里开始两种加载方式中的一种(内置加载),该框架是奇虎360开发的,官方给出优点 RePlugin是一套完整的.稳定的.适合全面使用的,占坑类插件化方案.我们&qu ...
- 浅谈SQL Server中的事务日志(三)----在简单恢复模式下日志的角色
简介 在简单恢复模式下,日志文件的作用仅仅是保证了SQL Server事务的ACID属性.并不承担具体的恢复数据的角色.正如”简单”这个词的字面意思一样,数据的备份和恢复仅仅是依赖于手动备份和恢复.在 ...
- Sql根据经纬度算出距离
SELECT ISNULL((2 * 6378.137 * ASIN(SQRT(POWER(SIN((117.223372- ISNULL(Latitude,0) )*PI()/360),2)+CO ...
- ACM-ICPC (10/12)
01分数规划 背景:根据楼教主回忆,曾经在一场比赛中秒掉了一道最优比例生成树问题,导致很多人跟风失败,最终悲剧. 什么是01分数规划呢? 这样的等式求最大,最小即为01分数规划. 如果你不知道该如何 ...
- Sublime Text 插件 【转】
好厉害,好漂亮. http://www.cnsecer.com/460.html 安装Sublime Text 3插件的方法: 朋友们,小站活着不容易,全靠广告费养着了,如果本文对你有帮助.麻烦动下手 ...
- Python Day 15 递归、匿名函数、内置函数
阅读目录 内容回顾 生成器的send方法 递归 匿名函数 内置函数 ##内容回顾 #1.带参装饰器 - 自定义 | wraps def wrap(info) def outer1(func): fro ...
- Android学习笔记_44_apk安装、反编译及防治反编译
一.APK安装 1.首先需要AndroidManifest.xml中加入安装程序权限: <!-- 安装程序权限 --> <uses-permission android:name=& ...