Apply ng-style only if this data exists

Question

I'm building a page with Angular and trying to conditionally apply ng-style to a div only if 'cover' is defined in my data resource. {{data.cover}} renders the cover image URL in the template. I tried the code below but it doesn't work.

<div class="cover" ng-style="{'background-image: url({{data.cover}})':data.cover}"></div>

UPDATE: This is the solution I came up with, adding this in the controller (I needed to do the same thing for the user cover and avatar):

var cover = $scope.data.cover; 
var avatar = $scope.data.user.image; 

if (typeof $scope.data.cover !== "undefined") { 
    $scope.coverImage = { 'background-image': 'url('+cover+')' }; 
} 

if (typeof $scope.data.avatar !== "undefined") { 
    $scope.avatarImage = { 'background-image': 'url('+avatar+')' }; 
}

In the HTML template:

<div class="cover" ng-style="coverImage"></div>
<div class="avatar" ng-style="avatarImage"></div>

Although I'm not sure if this would be considered DOM manipulation that should be handled via a directive and not a controller? Seemed much simpler to do this in the controller rather than a separate directive.

I've edited my answer so it's supposed to work – Sorikairo May 24 '16 at 03:21 — Sorikairo, May 24 '16 at 03:21

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

According to Angular ng-style with a conditional expression I would use this syntaxe :

<div class="cover" ng-style="coverExist() && {'background-image': 'url({{data.cover}})'}"></div>

With a method that does return true if the variable exist, either it returns false, see the following :

$scope.coverExist = function()
    { 
if (typeof $scope.data.cover == "undefined") return false;
else
return true; 
}

You may ask, why a method while I could have test that data.cover just got a "truhly" value. If you ever need to change the condition, for example, you set it only if it got a certain size/resolution, whatever, just change the method behavior and keep the "true" and "false" return based on your condition.

edited May 23 '17 at 11:52

Community

1
1

answered May 24 '16 at 03:15

Sorikairo

798
4
19

This gives me some sort of syntax error----> Error: [$parse:syntax] http://errors.angularjs.org/1.5.5/$parse/syntax?p0=(&p1=is[object Object]nexpected%C%expecting%%5B%A%D&p2=12&p3=%BcoverExist()%%26%%20'background-image%A%url()'%D&p4=()%%26%%20'background-image%A%url()'%D – annieXo May 24 '16 at 03:42
( I am actually using `{[{data.cover}]}` or `{[{value}]}` for start/end symbols so `{{value}}` doesn't interfere with my django template tags, if that makes any difference... ) – annieXo May 24 '16 at 03:48
@annieXo Edited ! I tried it on my own website, it works with angular only, try it – Sorikairo May 24 '16 at 03:53
@annieXo edited again so it match your variable name. – Sorikairo May 24 '16 at 03:57
Still not working for me. In the browser inspector I see: `
` as if it's able to get `data.cover` but can't insert it in the style attribute... hmm. (thanks for your help!)
– annieXo May 25 '16 at 00:33
@annieXo Wait, you don't have the "style="background-image:url("");" part in your code, do you ? – Sorikairo May 25 '16 at 00:38
No, I used your code. This is what I see when I load the page in the browser inspector. I assume it's showing the style attribute that is added by the coverExist() function but it seems to be showing that it gets added without the `data.cover` as the URL. – annieXo May 25 '16 at 00:45
Can you do a console.log(data.cover) in the coverExist method ? – Sorikairo May 25 '16 at 00:55
I think it's clear the function is able to find `data.cover` since it shows in the code I posted above from the console, and it is only defined in that function, not elsewhere in the DOM. For now I switched to simply using a data-attribute (`data-cover`) on the element with `{{data.cover}}` as its value and using jQuery to apply that as the background image if the data-attribute has a value. – annieXo May 25 '16 at 18:42
@annieXo yeah pretty obvious.. I was tired sorry. Well.. Can you post your controller ? – Sorikairo May 26 '16 at 02:25
No worries, I appreciate your help! I just updated the post with the solution I came up with. Not sure if it's the most ideal but it's what I was able to get to work when other solutions failed. – annieXo May 27 '16 at 20:20
Well, it works, nice done ! Still surprised that my answer does not work for while it works on my test :'( – Sorikairo May 28 '16 at 00:18

score 0 · Answer 2 · answered May 24 '16 at 03:21

0

Try:

ng-style="data.cover && {'background-image: url({{data.cover}})'}"

answered May 24 '16 at 03:21

user3335966

2,673
4
30
33

fyasir · Answer 3 · 2016-05-24T03:59:27.787

0

Try this

<div class="cover" ng-style="!!data.cover && {'background-image: url({{data.cover}})'}"></div>

edited May 24 '16 at 03:59

answered May 24 '16 at 03:23

fyasir

2,924
2
23
36

Apply ng-style only if this data exists

3 Answers3