Id like to display dynamic background images using angular's ng-repeat directive.
At the moment Im doing this by setting it as an inline style like so:
<div ng-repeat="thing in things"
style="background-image: url({{thing.image}})" >
</div
I would prefer to use standard angular tools to accomplish this and avoid using inline styles. I would set a static background image using ng-style but this does not seem practical for an indeterminate number of objects.
What is the correct solution for something like this?
To set an image dynamically, suggest to use ng-src
<div ng-repeat="thing in things">
<img ng-src="{{thing.ImageUrl}}" />
</div
This would then give you expected result, because thing.ImageUrl is evaluated and replaced by its value after angular is loaded.
Update as a background Image now
<div ng-repeat="thing in things" ng-style="{'background-image': 'url(' + thing.ImageUrl + ')'}"></div
you can use it into <img> tags like below
<img ng-repeat="x in array" src="{{ x.image_url }}" style="static inline stylesheet" />
or use
<img ng-repeat="x in array" ng-src="x.image_url" style="static inline stylesheet" />
Related
I have a strange issue with my a value not properly working. Basically I have a big array of id's that correspond to images on a server.
Images: {
"Set1" : {
'Blue':['8277','8278','8279','8280','8281','8282','8283'],
'Green':['8284','8285'],
'Red':['8286','8287','8288','8289']
}
}
Within my controller model I have an ng-repeat that looks something like this.
<div ng-controller="myCtl">
<div ng-repeat="(key, value) in cities">
<p>
<img src="http://wesbite.api.com/{{value[0]}}/half?system=xxxxml&pubtoken=hfdshfgsjkhgkhfkjghkdshgjkshfhdffhksfhgdfhgdskhsgkf4658cee&refreshRate=2000">
</p>
</div>
</div>
My issue that it will not actually resolve the img onto the page. If I pull in imgs any other way it works fine.
Is this a problem with mixing HTML and within an ng-repeat loop?
use ng-src in place of just src
<img ng-src="http://wesbite.api.com/{{value[0]}}/half?system=xxxxml&pubtoken=hfdshfgsjkhgkhfkjghkdshgjkshfhdffhksfhgdfhgdskhsgkf4658cee&refreshRate=2000">
Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.
Documents : https://docs.angularjs.org/api/ng/directive/ngSrc
<div ng-controller="myCtl">
<div ng-repeat="(key, value) in cities">
<p> <img ng-src="http://wesbite.api.com/{{value[0]}}/half?system=xxxxml&pubtoken=hfdshfgsjkhgkhfkjghkdshgjkshfhdffhksfhgdfhgdskhsgkf4658cee&refreshRate=2000"></p>
</div>
</div>
I am using ng-repeat to create a list of videos. I need to set rel attribute of image in each row. I am trying in following way:
<li ng-repeat="video in top_videos >
<div class=" video-list" >
<a href="#">
<img src="images/aspect-px.png" rel="{{video.video_image}}" /></a>
<h3>{{video.name}}</h3>
</div>
</li>
It is binding the video.name in h3 tag but not binding rel with video.video_image value. Instead of video.video_image's value, it is binding it as a string i.e http://localhost:9000/%7B%7Bvideo.video_identifier%7D%7D. My video.video_image has valid image urls like http://my-cdn-server/vaild-image.jpg.
I have lot's of theme related jQuery methods, which need a valid rel value.
Please help me to make it work.
There is a really good read on understanding the scopes at AngularJS give it a look even if this is not the cause it will give you a great understanding on basic concepts:
https://github.com/angular/angular.js/wiki/Understanding-Scopes
or just watch the video (3 min)
https://www.youtube.com/watch?v=ZhfUv0spHCY&feature=youtu.be&t=30m
What I believe the issue is: top_videos is a plain variable usually this causes troubles when accessing an object inner attributes when using angular 2 way binding, the general recommendation is that there should be an additional level (topLevel.your object):
<li ng-repeat="video in data.top_videos >
<div class=" video-list" >
<a href="#">
<img src="images/aspect-px.png" rel="{{video.video_image}}" /></a>
<h3>{{video.name}}</h3>
</div>
</li>
Obviously that additional level should be added everywhere where you are using your variable
I am making use of ng-repeat to display items in an array. For each item, i check that the $index satisfies a condition.
In chrome and even Internet Explorer, this works perfectly without a hitch. However, in Mozilla, it seems to update the $index only after the ng-repeat is concluded. So, the conditions do not work a lot of the time. An example of such conditions is:
<div class="active item" data-slide-number="{{$index}}" ng-repeat="img in attraction.Images" ng-if="img.first == true">
<img ng-src="{{IMG(img.FileName + img.FieExtention)}}" class="img img-responsive">
</div>
In response to Lorenzo's answer, i have also tried
<div class="active item" data-slide-number="{{$index}}" ng-repeat="img in attraction.Images" ng-if="$parent.$index == 0">
<img ng-src="{{IMG(img.FileName + img.FieExtention)}}" class="img img-responsive">
</div>
<div class="item" data-slide-number="{{$index}}" ng-repeat="img in attraction.Images" ng-if="$parent.$index > 0">
<img ng-src="{{IMG(img.FileName + img.FieExtention)}}" class="img img-responsive">
</div>
I am almost going mad here ... Please help
ng-if creates a child scope.
To access $index you need to use $parent.$index to access the parent scope of ng-if (so the scope of ng-repeat)
it's not a good idea to use ng-repeat and ng-if on the same element.
both create their own scope, hence it is not recommended to do so.
generally speaking it's a good idea to avoid using other directives in combination with ng-repeat on the same element whenever possible.
you should create a child element withing the ng-repeat element and put other directives on that child element instead.
<li ng-repeat="appliance in appliances | limitTo:2">
<div class="icon">
<img src="images/vector/Appliances/w-{{appliance.DashboardIcon}}.svg">
</div>
<div class="label">{{ appliance.Label }}</div>
</li>
In AngularJS I can see in the console that it tries to load '/images/vector/Appliances/w-%7B%7Bappliance.DashboardIcon%7D%7D.svg'. Now my ng-repeat works just fine. If I decodeURIComponent I see that the above %7B and %7D are '{' and '}' respectively. How can I prevent this error from happening?
Use ng-src here instead src
<img ng-src="images/vector/Appliances/w-{{appliance.DashboardIcon}}.svg">
Using Angular markup like {{hash}} in a src attribute doesn't work
right: The browser will fetch from the URL with the literal text
{{hash}} until Angular replaces the expression inside {{hash}}. The
ngSrc directive solves this problem.
The buggy way to write it:
<img src="http://www.gravatar.com/avatar/{{hash}}" alt="Description"/>
The correct way to write it:
<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />\\
For more info see this link https://docs.angularjs.org/api/ng/directive/ngSrc
You have to use ng-src, if you use src, the browser tries to load the image before angular's loaded, that's why ng-src exists.
<img ng-src="images/vector/Appliances/w-{{appliance.DashboardIcon}}.svg">
I've created a simple directive in Angular which generates a scroller to display some products.
I'm having an issue with one part of the code.
<ul ng-style="{'margin-left':{{currentMargin}}+'px'}">
<li ng-repeat="tyre in tyres" ng-style="{'width':{{liWidth}}+'px'}">
<div class="imageContainer"><img src="../Images/eutl/{{tyre.image}}"/></div>
<div class="details">
<h3>{{tyre.name}}</h3>
About this tire
</div>
</li>
</ul>
and this is what it looks like in the browser once executed
<ul ng-style="{'margin-left':0+'px'}">
<!-- ngRepeat: tyre in tyres -->
<li ng-repeat="tyre in tyres" ng-style="{'width':265+'px'}" class="ng-scope" style="width: 265px;">
<div class="imageContainer"><img src="../Images/eutl/tire.jpg"></div>
<div class="details">
<h3 class="ng-binding">Fuel Efficient</h3>
About this tire
</div>
</li>
<!-- end ngRepeat: tyre in tyres --></ul>
after executing this on my page I get the scroller and the ng-style inside the "li" elements gets displayed correctly, while the ng-style for the "ul" doesn't.
I've tried multiple solutions, even trying to add the same exact ng-style from the "li" element and it just doesn't get processed and no style is added.
Can anyone help me by pointing out a mistake in my markup or a possible cause for one ng-style working on the Li elements and the other not working on the UL itself?
The other problem I'm having is that the value of the currentMargin is not updating in IE8/9 and so on.
Thanks
ng-style accepts an Angular expression that evaluates to an object. This means that if you want to use a variable inside that expression, you can use it directly (without the double-curlies):
ng-style="{width: liWidth + 'px'}"
Double-curlies are used when you want to insert a dynamic, interpolated value to an argument that accepts a string, like <img alt="{{product.name}} logo">. You then put an expression inside those brackets.
Try to do :
ng-style="{'width':liWidth+'px'}">
No curly bracket, a lot of ng directive don't like it