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 相关文章推荐
没有document.getElementByName方法
Aug 19 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 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
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
自定义jQuery选项卡插件实例
2013/03/27 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
python计算两个数的百分比方法
2018/06/29 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
在python 中实现运行多条shell命令
2019/01/07 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
利用Python检测URL状态
2019/07/31 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
美国在线宠物商店:Chewy
2019/01/12 全球购物
艺术节主持词
2014/04/02 职场文书
政府四风问题整改措施
2014/10/04 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server