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 相关文章推荐
javascript 页面只自动刷新一次
Jul 10 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
vue better-scroll插件使用详解
Jan 25 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
Element Carousel 走马灯的具体实现
Jul 26 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
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中函数的形参与实参的问题说明
2010/09/01 PHP
php异常处理方法实例汇总
2015/06/24 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
Vue异步加载about组件
2017/10/31 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
Python常见文件操作的函数示例代码
2011/11/15 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
个人简历中的自我评价范例
2013/10/29 职场文书
软件工程师岗位职责
2013/11/16 职场文书
装修协议书范本
2014/04/21 职场文书
小学生优秀评语
2014/12/29 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python