angularjs下拉框空白的解決辦法
搜索angularjs下拉框空白，可以出現(xiàn)很多解決方案，但是對于靜態(tài)字段來說，網(wǎng)上目前還沒有找到解決方案，如下：
<select class="form-control" ng-model="UserState" ng-init="UserState=0"> <option value="-1">選擇狀態(tài)</option> <option value="0">在職</option> <option value="1">離職</option> </select>
如果要按照網(wǎng)上的方法來解決，首先需要把下拉選項(xiàng)存放到一個對象數(shù)組當(dāng)中，對于一個兩個下拉框還好說，如果項(xiàng)目當(dāng)中有很多這種下拉框，就要費(fèi)好大勁了。最簡單粗暴的方法是修改angularjs源代碼，不再生成空白符。奈何功力有限，未能找到相應(yīng)添加空白行的地方，不過值得欣慰的是，發(fā)現(xiàn)出現(xiàn)空白符是因?yàn)槭褂昧薾g-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即可實(shí)現(xiàn)相同的功能，同時(shí)不會出現(xiàn)下拉空白，當(dāng)然，這個指令畢竟是自己隨便寫的幾行代碼，遠(yuǎn)遠(yuǎn)不如ng-model強(qiáng)大，比如動態(tài)修改指令綁定的值來改變選中項(xiàng)還不能實(shí)現(xiàn)，僅僅可以在第一次初始化時(shí)綁定選中項(xiàng)，另外也不支持ng-selected。如果讀者有興趣，可以自己實(shí)現(xiàn)后續(xù)的功能，對于我來說，已經(jīng)可以滿足需要了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- AngularJS動態(tài)生成select下拉框的方法實(shí)例
- angularjs 動態(tài)從后臺獲取下拉框的值方法
- angularJs-$http實(shí)現(xiàn)百度搜索時(shí)的動態(tài)下拉框示例
- AngularJS中下拉框的高級用法示例
- AngularJS中下拉框的基本用法示例
- Angularjs實(shí)現(xiàn)下拉框聯(lián)動的示例代碼
- angularjs 實(shí)現(xiàn)帶查找篩選功能的select下拉框?qū)嵗?/a>
- Angularjs實(shí)現(xiàn)帶查找篩選功能的select下拉框示例代碼
- AngularJS使用ng-repeat指令實(shí)現(xiàn)下拉框
- AngularJS實(shí)現(xiàn)多級下拉框
相關(guān)文章
在JavaScript的AngularJS庫中進(jìn)行單元測試的方法
這篇文章主要介紹了在JavaScript的AngularJS庫中進(jìn)行單元測試的方法,主要針對AngularJS中的控制器相關(guān),需要的朋友可以參考下2015-06-06
使用Angular 6創(chuàng)建各種動畫效果的方法
Angular能夠讓我們創(chuàng)建出具有原生表現(xiàn)效果的動畫。我們將通過本文學(xué)習(xí)到如何使用Angular 6來創(chuàng)建各種動畫效果。在此，我們將使用Visual Studio Code來進(jìn)行示例演示。感興趣的朋友跟隨小編一起看看吧2018-10-10
如果你正在構(gòu)建一個使用 API 的應(yīng)用程序,你會想在開發(fā)過程中使用測試環(huán)境的 API 密鑰,而在生產(chǎn)環(huán)境中使用生產(chǎn)環(huán)境的 API 密鑰,在本教程中,你將學(xué)習(xí)如何在 Angular 中使用環(huán)境變量,需要的朋友可以參考下2024-02-02
Angular實(shí)現(xiàn)的自定義模糊查詢、排序及三角箭頭標(biāo)注功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)的自定義模糊查詢、排序及三角箭頭標(biāo)注功能,涉及AngularJS針對頁面table元素的遍歷、查詢、判斷、排序等相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
Angular4.x通過路由守衛(wèi)進(jìn)行路由重定向?qū)崿F(xiàn)根據(jù)條件跳轉(zhuǎn)到相應(yīng)的頁面(推薦)
這篇文章主要介紹了Angular4.x通過路由守衛(wèi)進(jìn)行路由重定向，實(shí)現(xiàn)根據(jù)條件跳轉(zhuǎn)到相應(yīng)的頁面,這個功能在網(wǎng)上商城項(xiàng)目上經(jīng)常會用到，下面小編給大家?guī)砹私鉀Q方法一起看看吧2018-05-05
今天小編就為大家分享一篇ng-repeat指令在迭代對象時(shí)的去重方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了詳解angular如何調(diào)用HTML字符串的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要為大家詳細(xì)介紹了AngularJS Phonecat實(shí)例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了Angular Renderer (渲染器)的具體使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
詳解AngularJS跨頁面?zhèn)髦担╱i-router）
本篇文章主要介紹了詳解AngularJS跨頁面?zhèn)髦担╱i-router），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08