angularjs下拉框空白的解决办法


Posted in Javascript onJune 20, 2017

搜索angularjs下拉框空白,可以出现很多解决方案,但是对于静态字段来说,网上目前还没有找到解决方案,如下:

<select class="form-control" ng-model="UserState"
  ng-init="UserState=0">
 <option value="-1">选择状态</option>
 <option value="0">在职</option>
 <option value="1">离职</option>

 </select>

如果要按照网上的方法来解决,首先需要把下拉选项存放到一个对象数组当中,对于一个两个下拉框还好说,如果项目当中有很多这种下拉框,就要费好大劲了。最简单粗暴的方法是修改angularjs源代码,不再生成空白符。奈何功力有限,未能找到相应添加空白行的地方,不过值得欣慰的是,发现出现空白符是因为使用了ng-model的原因,干脆写个指令来替代ng-model的功能也可以解决下拉空白的问题,于是写了一个指令:

app.directive("dModel",function () {
  return {
   restrict:'A',
   compile:function(element, attrs, transclude){
    console.log(transclude);
    var dModel=attrs["dModel"];
    return{
     pre:function(scope, iElement, iAttrs){

      var selectValue=scope[dModel]+"";
      if(selectValue)
      {
       var options=element.children();
       for(var i=0;i<options.length;i++)
       {
        if(selectValue==options[i].value)
        {
         options[i].setAttribute("selected",true);
         break;
        }
       }
      }
     },
     post:function(scope, iElement, iAttrs){
      element.on("change",function () {
       var selectValue=this.value;
       scope.$apply(function () {
        scope[dModel]= selectValue;
       });
      })
     }
    }
   }

  }
 });

用该指令替代ng-model即可实现相同的功能,同时不会出现下拉空白,当然,这个指令毕竟是自己随便写的几行代码,远远不如ng-model强大,比如动态修改指令绑定的值来改变选中项还不能实现,仅仅可以在第一次初始化时绑定选中项,另外也不支持ng-selected。如果读者有兴趣,可以自己实现后续的功能,对于我来说,已经可以满足需要了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 Javascript
小程序实现文字循环滚动动画
Jun 14 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 #Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 #Javascript
详解vue-resource promise兼容性问题
Jun 20 #Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 #Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 #Javascript
vue中如何实现变量和字符串拼接
Jun 19 #Javascript
js实现随机数字字母验证码
Jun 19 #Javascript
You might like
在WIN98下以apache模块方式安装php
2006/10/09 PHP
PHP+DBM的同学录程序(3)
2006/10/09 PHP
PHP安全配置
2006/12/06 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
jQuery.extend 函数的详细用法
2012/06/27 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
python实现实时监控文件的方法
2016/08/26 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
Foreo国际站:Foreo International
2018/10/29 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
安全环保演讲稿
2014/08/28 职场文书
科学发展观活动总结
2014/08/28 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
介绍信范文大全
2015/05/07 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
nginx 添加http_stub_status_module模块
2022/05/25 Servers
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS