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 相关文章推荐
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
Vue实现跑马灯效果
May 25 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不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
ThinkPHP模型详解
2015/07/27 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
浅析Python编写函数装饰器
2016/03/18 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
python保存网页图片到本地的方法
2018/07/24 Python
python批量修改图片大小的方法
2018/07/24 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
单位委托书范本
2014/04/04 职场文书
企业宗旨标语
2014/06/10 职场文书
代理人委托书
2014/08/01 职场文书