Question

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

function makeVisible(){
      $('.myClass').css('display', 'block');
  }

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()"

AngularJS ng风格的背景图像

1 个答案: