CODEWITHSUNDEEP
angularjs
quma
quma

Reputation: 5733

AngularJS ng-style background-image

I user AngularJS for setting a background- image but ng-style does not work - style (the second row) works fine. Does anyone have any hint how to get ir work? 

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

Upvotes: 2

Views: 479

Answers (1)

dfsq
dfsq

Reputation: 193271

You expression inside ngStyle directive is messed up. Correct one could be:

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

If it's hard to read you can either split it into several lines:

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

or move condition part inside string concatenation:

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

or even

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

However... You should avoid using ngStyles directive for such cases. I would go with two CSS classes for male and female. This is way more flexible:

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

and use ngClass directive:

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

Upvotes: 5

Related Questions