angularjs下拉框空白

標籤：ons   selected   下拉   欄位   相同   restrict   options   選中   log   

        搜尋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。如果讀者有興趣，可以自己實現後續的功能，對於我來說，已經可以滿足需要了。

angularjs下拉框空白