去除ng-options第一个选项为空

最新推荐文章于 2024-04-28 05:07:47 发布
最新推荐文章于 2024-04-28 05:07:47 发布
阅读量285 收藏
点赞数
原文链接：https://my.oschina.net/u/3501740/blog/1802380
版权

项目中使用ng-options时，发现循环出来的select的第一个option为空，页面审查元素如下图： 
174240_bh14_3501740.png
页面效果： 
174148_W1qV_3501740.png 

这不但影响样式，而且影响用户体验。那么怎么删除select第一个为空的option呢？ 
解决办法是在这个select里加上这样一句话就好了： 
174329_o9X1_3501740.png

<option value="" selected hidden></option>
  • 1

这样的话，循环出来的select第一个为空的option就不会显示了，页面效果如下： 
174411_d7Dd_3501740.png 

转载于:https://my.oschina.net/u/3501740/blog/1802380

chunshen2159
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AngularJS实现在ng-Options加上index的解决方法
11-27
本文实例讲述了AngularJS实现在ng-Options加上index的解决方法。分享给大家供大家参考，具体如下： Angularjs交流群中有位童学问道如何为Angular select的ng-Options像Angularjs的ng-Repeat一样加上一个索引$index. 其实对于这个问题来说Angular本身并未提供$index之类的变量供使用。但是也不是说对于这个问题我们就没有解决方案。 把这个问题换成角度来看,我们所需要的就是js数组的下标，所以我们如果我们能够在对象上加入下标，使用表达式作为option的label就能解决了。 但是第一印象让我想起的是js数组本来就是一个ke
AngularJS动态绑定ng-options的ng-model实例代码
12-01
什么情况下会需要动态绑定 ng...此时你需要用 ng-repeat 将数据展开，并且将 Options 个别设置为 ng-options 的数据，此时就须要动态去绑定 ng-model，那么该如何绑呢？你可能需要在你的 Controller 底下加上一个变量来
AngularJS进阶(四十二)ng-options渲染的第一项为空问题分析及解决方案_angular1 option 的value值 赋值0 会展示不出数据来(1)
最新发布
2401_84447233的博客
04-28 272
小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
angular中ng-options第一个为空白的问题
weixin_30248399的博客
01-16 412
　　 一个angular的项目中使用ng-options，但是页面上显示时渲染出来的第一个option为空，审查元素，如图： 　　　　 　　页面上的效果也是为空； 　　检查自己的代码，如下图： 　　按照教程上的写法没问题啊，但是这样的效果不但样式上会影响，也会极度影响用户体验。 　　所以咱们怎么才能删除第一个空白的option呢。如下图： 　　　　这样第一...
select下拉框中利用ng-option产生的第一行留白解决方法
qq_43033251的博客
07-10 625
select下拉框中利用ng-option产生的第一行留白解决方法 html代码 <!-- 按键模式--> <div class="col-md-4" style="padding-left: 0"> <label>按键模式：</label> &...
AngularJS进阶(四十二)ng-options渲染的第一项为空问题分析及解决方案
IT全栈 华强工作室
09-10 4659
时，如果首次使用，可能会在渲染完成后发现下拉列表的第一项为空，并且在选择一项之后，为空的第一项已经消失了，这样用户体验上来说很不好。一起使用的，从而我们就可以知道，渲染生成的第一项为空原因肯定和。的时候，是配合模型指令。
angularJS解决下拉框默认空白（ng-report和ng-options）
keze250的博客
06-03 369
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <.
Angular中ng-options下拉数据默认值的设定方法
12-29
今天学习了一下Angular中ng-options下拉数据默认值的设定方法，留个笔记 直接上代码 <div class=form-group> <label class=col-sm-2>教师 <div class=col-sm-10> <select style=display:block; width:100%...
AngularJS基础 ng-options 指令详解
10-21
本文主要介绍AngularJS ng-options 指令,这里对ng-options指令的知识做了详细整理,并附有详细的代码示例,有需要的小伙伴可以参考下
ng-options渲染的第一项为空的解决办法
Quber
05-15 441
　　我们在使用ng-options时，如果首次使用，可能会在渲染完成后发现下拉列表的第一项为空，并且我们在选择一项之后，为空的第一项已经消失了，这样用户体验上来说很不好。 　　原因就在于：我们使用ng-options的时候，是配合模型指令ng-model一起使用的，从而我们就可以知道，渲染生成的第一项为空原因肯定和ng-model的初始值有关系。 解决办法： 　　1.可以在控制器...
angular使用ng-options，第一个option为空的问题
一只爱吃糖的小羊
04-25 6200
项目中使用ng-options时，发现循环出来的select的第一个option为空，页面审查元素如下图： 页面效果： 其代码如下： &lt;select ng-model="selectUser" ng-options="i.NAME for i in users"&gt;&lt;/select&gt; 这不但影响样式，而且影响用户体验。那么怎么删除select第一个为...
angularjs select 选择默认显示空白以及第一行空白的解决方法
菜鸡奋斗ing的博客
12-15 1万+
最近需要加个select功能，以前是直接暴力写个<option value="" disabled>--请选择--</option> 这样就可以默认显示这个选项了，但是这样做的效果还是不够好。就像我现在需求，默认显示就是要指定其中一个选项而不是这个多余的选项，下面是解决的代码。<select ng-model="countrys" ng-init="countrys=countries[0]" ng
select下拉选择第一个选项为空白、option无法选中的解决办法，
qq_31620497的博客
05-17 1万+
问题：&lt;select ng-model="id"&gt; &lt;option value="{{v.id}}" ng-repeat="v in list" ng-bind="v.name" ng-selected="v.id == id"&gt;&lt;/option&gt; &lt;/select&gt;第一个选项为空白；或者
ng-options 如何实现其中一项option禁选
mayue_web的博客
08-13 1381
通过ng-options写出的下拉列表如何实现其中一个是灰色的禁选状态呢？ 普通的select可以用optgroup标签，但是angular如何实现呢？ ng-options的数据是这样的 $scope.list = [{ key: '100', value: '不可选' },{ key: '200', value: '第一个选项' },{ key: '300', value: '第二...
解决select下拉的第一个值为空的问题
weixin_34403693的博客
07-31 2074
为什么80%的码农都做不了架构师？>>> ...
在select中，载入时默认select为空白，选项内不显示空白项
热门推荐
casanover
03-08 3万+
今天做select的时候，页面要求为：载入默认选项框为空白，点击下拉框显示正常选项。 找了半天  有两种办法，一种纯css实现，一种借助js实现。先说js的办法吧。html：&lt;body onload="load()"&gt; &lt;select id="abc" &gt; &lt;option &gt;1&lt;/option&gt; ...
select默认为空，下拉选项中option不为空
shen4402的博客
01-09 2万+
网上找了几个方法不行，终于找到一篇博客，解决了，里面有三个方法，用了一个最简单的。 在option   添加    style='display: none' 另外两种： 1、option selected="selected" disabled="disabled"  style='display: none' value=''>option> 2
通过隐藏option实现select的联动效果
佑佴哆
12-14 544
代码如下: Untitled Page $(function(){ //Bind the change event $("#dropLang").unbind("change", eDropLangChange).bind("change", eDropLangChange); $("#dropFrame").unbind("change", eDropFrameChange).bin
ng-options语法
06-08
`ng-options` 是 AngularJS 中用来生成下拉框选项的指令，其语法比较复杂，但是非常灵活，可以满足各种需求。 以下是 `ng-options` 的语法： ``` ng-options="expression for item in collection track by ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值