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 相关文章推荐
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
JavaScript 的继承
Oct 01 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
Bootstrap框架安装使用详解
Jan 21 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
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
js获取ip和地区
2017/03/10 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
Python中如何引入第三方模块
2020/05/27 Python
python 爬虫请求模块requests详解
2020/12/04 Python
瑞典度假品牌:OAS
2019/05/28 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
音乐专业应届生教师求职信
2013/11/04 职场文书
档案管理员岗位职责
2013/12/01 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
房屋授权委托书范本
2014/10/07 职场文书
2014年班组工作总结
2014/11/20 职场文书
2014年双拥工作总结
2014/11/21 职场文书
党支部审查意见
2015/06/02 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL