I want to dynamically generate image url in ng-reapeat like this
<img ng-src="{{baseurl}}+{{category.imageurl}}">
the above code is not working. Please help me how can I do it.
If the + is out of the mustaches, it's not interpretedt at all and ends up being in the attribute value. You just need
{{baseurl}}{{category.imageurl}}
or, better,
{{baseurl + category.imageurl}}
Depending on which version of AngularJS you are using, this is expected.
Check this out:
https://docs.angularjs.org/guide/migration#you-can-only-bind-one-expression-to-src-ng-src-or-action-
Related
AngularJS code:
$scope.checking="<div style="color:red;">check</div>";
HTML code:
{{checking}}
Result in HTML page in browser:
<div>check</div>
Now what I want is that the $scope.checking variable be parsed in HTML as if it's a tag I defined.
So the result in html page should be:
check
and the above should come in red color
Any way to do it? hopefully its simple... AngularJS experts please help!
i got the output but the string doesnt come in red! the style tag is ignored! how can i do it? do i use interpolate?
Use ng-bind-html!
Here is the docs-page for ng-bind-html. This will help you.
https://docs.angularjs.org/api/ng/directive/ngBindHtml
ng-bind-html will render your html-string in the browser.
Perhaps you have to "trust" your html string like here: http://erikaugust.com/thoughts/ng-bind-html/
Is it possible to add alternate text to images dynamically in angularjs.
I tried this.
alt={{dynamicText}}.
Simply setting like this doesnt seem to work.
You just have to use "" just like in normal html. So:
alt="{{dynamicText}}"
It was the problem of Chrome browser. As explained here, putting it like this solves the issue.
title="{{dynamicText}}"
Use []: [alt]="dynamicText"
I'm using Angularjs ,I have one problem,please help me.
When I code $filter('orderBy')(source,"-nowsuccess");
the source can orderBy nowsuccess
But I code $filter('orderBy')(source,"-nowsuccess","-total_order");
the source can't orderBy nowsuccess and total_order
this is a bug?
Please tell me correct way!
From the official documentation:
$filter('orderBy')(array, expression, reverse)
I think that what you want is to order by -nowsuccess first and then by -total_order, if that's the case you could do it like this:
$filter('orderBy')(source,['-nowsuccess','-total_order']);
I am going to create an application with Angularjs. I have several modals (with the ng-dialog libraries) to create, modify data like an user for example.
When I open it, I can always see during several milliseconds names variables with accolades like {{user.name}}, before it renders the real value.
It is not really beautiful and then if someone has an idea about how to manage this type of display problems, please share it.
Thank you in advance.
There are couple of ways to deal with it, you could either use ng-bind or ng-cloak directives
Check angular ngCloak directive documentation
https://docs.angularjs.org/api/ng/directive/ngCloak
You can use ng-bind. Here is the official documentation on it:
It is preferable to use ngBind instead of {{ expression }} if a template is momentarily displayed >by the browser in its raw state before Angular compiles it. Since ngBind is an element attribute, >it makes the bindings invisible to the user while the page is loading
Usage:
Hello <span ng-bind="name"></span>!
Image not showing in ng-repeat, getting all data from indexeddb and binding to page everything show up expect img in blackberry 10 webworks
<img data-ng-src='{{item.Picture}}' width="100px;" height="100px;"/>
{
id:48758,
Botanical_name:"Cladothamnus pyroliflorus",
Common_name:"Himalayan Cotoneaster ",
Picture: "images/Fplants/Cladothamnus pyroliflorus.png",
},...
This wouldn't seem like an issue with IndexedDB.
For non-Angular directive attributes, such as src you want to interpolate as in the code below:
<img src='{{item.Picture}}' width="100px;" height="100px;"/>
For Angular directive attributes, there's no need for such interpolation:
<img data-ng-src='item.Picture' width="100px;" height="100px;"/>
As your data is going to be undefined on bootstrap, you want to use the latter approach. It prevents the browser from trying to load undefined as an image source.
Also, please note vaibhav's comment above. Without a leading slash, you'll load the images directory as relative to the current. While that may be what you're going for, it's probably going to make your code more reusable to include the leading slash regardless.
Update: If you're in an ng-repeat, note that your scope is not the scope in which the ng-repeat directive appears but it's own, brand new scope. Perhaps try out $parent.item.Picture
I'm having the same problem, it occurs with the image filename having spaces in between , maybe we could write a directive the removes the space from the filename as I'm calling the image via other variable such as title..
app.config(['$routeProvider','$compileProvider',function($routeProvider, $compileProvider){ $compileProvider.imgSrcSanitizationWhitelist('img/');