zoukankan      html  css  js  c++  java
  • angularjs下拉框空白

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

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

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

      

     1     app.directive("dModel",function () {
     2         return {
     3             restrict:'A',
     4             compile:function(element, attrs, transclude){
     5                 console.log(transclude);
     6                 var dModel=attrs["dModel"];
     7                 return{
     8                     pre:function(scope, iElement, iAttrs){
     9 
    10                         var selectValue=scope[dModel]+"";
    11                         if(selectValue)
    12                         {
    13                             var options=element.children();
    14                             for(var i=0;i<options.length;i++)
    15                             {
    16                                 if(selectValue==options[i].value)
    17                                 {
    18                                     options[i].setAttribute("selected",true);
    19                                     break;
    20                                 }
    21                             }
    22                         }
    23                     },
    24                     post:function(scope, iElement, iAttrs){
    25                         element.on("change",function () {
    26                             var selectValue=this.value;
    27                             scope.$apply(function () {
    28                                scope[dModel]= selectValue;
    29                             });
    30                         })
    31                     }
    32                 }
    33             }
    34 
    35         }
    36     });

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

  • 相关阅读:
    为什么Java的main方法必须是public static void?
    2. 直接插入、折半插入、希尔排序及其比较(插入类排序)
    1. 冒泡与选择排序及其比较
    0.排序介绍与性能度量
    (十)更快的排序算法(归并、快排、基数)
    (九)排序(选择、插入、希尔)
    (八)递归
    (七)栈的三种实现
    (六)栈的规则及应用
    (五)如何写测试类
  • 原文地址:https://www.cnblogs.com/xietong/p/7051012.html
Copyright © 2011-2022 走看看