AngularJS ng樣式的背景圖像

我用戶AngularJS用於設置背景圖像，但ng樣式不起作用 - 樣式（第二行）正常工作。有沒有人有任何暗示如何讓紅外工作？AngularJS ng樣式的背景圖像

ng-style="vm.currentUser.sex == 'FEMALE' ? background-image: url(../../../assets/img/female_default.png); : ''" 
style="background-image: url(../../../assets/img/female_default.png);"

來源

2016-02-17 quma

你在ngStyle指令內的表達式被搞亂了。正確的一個可能是：

ng-style="{'background-image': vm.currentUser.sex == 'FEMALE' ? 'url(../../../assets/img/female_default.png)' : 'url(../../../assets/img/male_default.png)'}"

如果它是很難讀，你可以將它分成幾行：

ng-style="{ 
    'background-image': vm.currentUser.sex == 'FEMALE' 
     ? 'url(../../../assets/img/female_default.png)' 
     : 'url(../../../assets/img/male_default.png)' 
}"

或移動字符串連接內部條件的一部分：

ng-style="{'background-image': 'url(../../../assets/img/' + (vm.currentUser.sex == 'FEMALE' ? 'female' : 'male') + '_default.png)'}"

甚至

ng-style="{'background-image': 'url(../../../assets/img/' + vm.currentUser.sex.toLowerCase() +'_default.png)'}"

但是 ...您應該避免使用ngStyles指令來處理這種情況。我會爲男性和女性提供兩個CSS類。這是方式更靈活：

.female { 
    backgroind-image: url(../../../assets/img/female_default.png); 
} 
.male { 
    backgroind-image: url(../../../assets/img/male_default.png); 
}

，並使用ngClass指令：

ng-class="vm.currentUser.sex.toLowerCase()"

來源

2016-02-17 11:36:44 dfsq

AngularJS ng樣式的背景圖像

回答

相關問題