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样式的背景图像

回答

相关问题