I have an image on my page like so:
<img ng-src='http://someurl.com/image.png?parameter={{selected.id}}' />
Is there any way in Angular to prevent ng-src resolution until after {{selected.id}} is set? Basically i do not want to load image until selected.id is set. To set selected.id I need to make Ajax call. What I am experiencing is two calls for the image.
First one with url like so http://someurl.com/image.png?parameter=
Then the second (correct) call after selected.id is set
It seems that this should be easy to do but I cannot think of a way.
Thank You,
Victor
You can use ng-if so the img tag will actually be removed until selected.id is truthy. This means the request for the image won't be made until selected.id is set.
<img ng-src='http://someurl.com/image.png?parameter={{selected.id}}' ng-if="selected.id" />
You can use ng-show directive
<img ng-src='http://someurl.com/image.png?parameter={{selected.id}}'
ng-if="selected.id" />
You can find some demo here :http://jsbin.com/fatote/5/edit?html,js,output
Related
I'm trying to get some data from my state passed down into this img
src url, and I can't seem to figure how to write it. I've tried using back
ticks and the dollar sign. I assume because I'm down in the render part
of the Component that won't work. Help me Obi-Wan, you're my only
hope.
<img src={'https://openweathermap.org/img/w/{data.weather.icon}.png'} alt='weather condition' />
Just like with vanilla JS, you have to use a Template Literal and use string interpolation to place your JS within the string (with a ${...}) like so:
<img src={`https://openweathermap.org/img/w/${data.weather.icon}.png`} alt='weather condition' />
you can use Template Literal
<img src={`https://openweathermap.org/img/w/${data.weather.icon}.png`} alt='weather condition' />
How to make the above codes work by using one <img>. I mean I want to use only one <img> but the conditions are the same. For now I'm using 2 img for condition and it's not good. How can I make it to use one img only. Any help?
<img ng-if="!image[$index].dataUrl" ng-src="/upload/image/rotation_banner/{{row.Image}}"/>
<img ng-show = "image[$index].dataUrl" ng-src="{{image[$index].dataUrl}}" />
Try this out:
<img ng-src="{{image[$index].dataUrl ? image[$index].dataUrl : '/upload/image/rotation_banner/' + row.Image}}" />
Hope this helps.
I have BB10 cordova app,
In view I have
<img ng-src="{{'someImageLink'}}">
And some local images not showing, there is blue question mark.
But if I will change to
<img src="someImageLink">
img works perfectly
Changing to
<img src="{{'someImageLink'}}">
not helping at all
Can't diagnose, do you mby have any ideas or know how to fix this issue on BB10?
You're close! Since Angular already evaluates the contents of ng-src, you do not need to wrap your expression in {{ }} braces:
$scope.imageLink = "image.png";
<img ng-src="imageLink">
After being evaluated, this will leave you with the equivalent of this, in the DOM:
<img src="image.png">
If you're using a hardcoded string to a local image file, and it will never ever change in your app, there's nothing wrong with using src="image.png" directly.
I hope this helps!
I am wondering if it's possible to assign a result of a function call to an ng-src in an image?
Basically, I need to retrieve a set of thumbnails for a set of data from an aspx page, there may or may not be a thumbnail. So I need to show a different preset image for a case when there is nothing returned from the thumbnail page.
Something like this:
<img ng-src="getThumbnail({{ item.Id }})" />
Where getThumbnail is a function which makes a http request to a url such as
http://localhost/Srv/getThumbnail.aspx?id=111
I've tried this but Angular is producing this:
<img ng-src="getThumbnail(111)" src="getThumbnail(111)">
Instead of calling the function. Is there a better way for doing this?
I've commented on your question but I'll offer my suggestion as a solution after looking at the AngularJS documentation. The ng-src directive will correctly set the src attribute of img. This directive can contain Angular expressions and these can call functions contained in your controller and reachable in the current scope. Hence instead of:
<img ng-src="getThumbnail({{ item.Id }})" />
Try this:
<img ng-src="{{ getThumbnail(item.Id) }}" />
In the former declaration, the function isn't available to the Angular scope, but it is in the latter. (If I am not mistaken, as I haven't tried the code myself).
Make sure the getThumbnail function is in a controller that is reachable to the current scope.
I have been working with routing and I have seen how I can update the ng-view using routing and a view template.. But the problem I have is that I am doing a REST call and depending what I get back from the response I wish to update part of the DOM with a view template but I don't want to involve routing.
Does anyone know how I can do this? Or any examples would be great
Thanks in advance
Another answer. Based on your description in the comment, it sounds like you wish to display part of the DOM conditionally.
When you want to display part of the DOM conditionally, you have the following choices:
Use an ng-show and ng-hide directive.
Based on what returns from the RESTful call, you can set up a model that will identify the DOM that needs to be displayed. An example:
<div ng-show="status">
This text will be shown only when the status is truthy
</div>
<div ng-hide="status">
This text will be shown only when the status is false.
</div>
Inside your controller, you could then set the status to true or false based on your RESTful calls and based on which part of the DOM you wish to display post RESTful call.
You can use ng-switch directive
While the ng-show and ng-hide directives will display the content of your DOM conditionally, that is anybody could simply open the source file and see the contents for both, ng-switch directive will load the contents only based on which case fulfills the swtich. An example:
<div ng-switch on="status">
<div ng-switch-when="true">
This text will be shown only when the status is truthy.
Else this is completely hidden and cannot be seen even
when looking at the source.
</div>
<div ng-switch-when="false">
This text will be shown only when the status is false.
Else this is completely hidden and cannot be seen even
when looking at the source.
</div>
</div>
The first child div is shown when the status is true else it is not shown at all. The advantage over ng-show or ng-hide is that the DOM will not contain the child elements if the case is not fulfilled.
$location.path() can be used here.
So, in your Parent Controller, you can make the REST call. Once you have the data with you, you can then decide which route to take. The route value goes into the path() function.
As an example, let us say that if your REST call returns with cherries, you need to take the /foo path (which, based on your $routeProvider will load the template associated with that route). You can then write the following:
$location.path('/foo');
and it will loads the /foo path - $routeProvider will then take care of loading the template associated with that path.
Reference: $location