AngularJS ng-style background-image

Question

I пользователь 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);" 

Answer 1

Ваше выражение внутри директивы 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()"