AngularJS ng 风格的背景图像答案

【问题标题】：AngularJS ng-style background-imageAngularJS ng 风格的背景图像
【发布时间】：2016-02-17 19:40:22
【问题描述】：

我使用 AngularJS 设置背景图像，但 ng-style 不起作用 - 样式（第二行）工作正常。有没有人有任何提示如何得到他们的工作？

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

【问题讨论】：

标签： angularjs

【解决方案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()"

【讨论】：