I have an angular JS application, which has a number of images, from an array.
My model looks something like this
$scope.images = [ {url: 'someimage.png', desc: 'some desc'}, {url: 'someimage.png', desc: 'some desc'} ]
In my view, I iterate over this, to display all the images.
<ul>
<li ng-repeat="image in images" ><img src="{{image.url}}" /></li>
</ul>
This works, but I get some page errors, which say
404 Not Found - http://localhost/{{image.url}}
The images are displaying correctly, so it is clearly the images are trying to be loaded before Angular has parsed to document get it ready. My scripts are also in the head, so it should not be a javascript ordering error.
The problem here was that I should be using ng-src and not src, so that it will only try to display the image when Angular is ready.
So, the correct code looks like
<ul>
<li ng-repeat="image in images" ><img ng-src="{{image.url}}" /></li>
</ul>
Related
I want to list the names of the items in the module (name). I then want to click the name and have the corresponding image load. The first image should load automatically. Tried following this question to make work, but it's related to thumbnail pics. I believe i'm missing some code in the ng-repeat section. Thx!
How to bind the src of an image to ng-model and extract it in Angular?
HTML
<div ng-controller ="DemoController as main">
<div>
<img ng-src="{{selectedImg.src}}" />
</div>
<ul>
<li ng-repeat="cat in main.cats">
<img ng-src="{{cat.images[0].name}}"
ng-click="selectedImg.src = cat.images[0].name"/>
</li>
</div>
</ul>
</div>
JS
angular.module('myApp',[]);
angular.module('myApp').controller('DemoController',
['$scope',function($scope) {
this.cats = [
{
name: 'Fluffy',
images: 'images/Fluffy.jpeg'
},
{
name: 'Tabby',
images: 'images/tabby.jpeg'
}
];
$scope.selectedImg = {};
}]);
Initially you want to set first image, then do it manually inside controller.
$scope.selectedImg = this.cats.image[0];
and also change ng-click to assign whole object of cat.images[0]
ng-click="selectedImg= cat.images[0]"
Not sure why my image's aren't being loaded by angular, here's what I've got:
<li class="list-group-item" ng-repeat="family in product.families | orderBy:'category'">
<h3>{{family.category}}</h3>
<div class="img-wrap">
<img ng-src="{{family.image}}"/>
</div>
</li>
family.category works, but my ng-src does not seem to be. When I look in the HTML of the loaded page all I see is <img ng-src>
JSON Sytnax
"families": [
{
"category": "Tablets",
"image": "images/tablet.png"
}
]
You can take a look at the live version of this here
Make sure image url is correct, try complete image url in json.
In chrome dev tools-> network check which url it in invoking.
--
I have low reputation can't comment.
I am trying to work out ng repeat animation when I add/remove items from two different arrays one after another but it doesn't seem to work really smoothly on chrome-it works on firefox. Here is the following example codes:
template.html
<ul>
<li ng-repeat='item1 in arr1' class="repeated-item">
<span>{{ item1 }}</span>
</li>
</ul>
index.html
<div>
<div ng-include='template.html'></div>
<ul>
<li ng-repeat='item2 in arr2' class="repeated-item">
<span>{{ item2 }}</span>
</ul>
</div>
I notice animation works quite well for outside repeat except ng-included template. Hope you guys can help to figure out this.
You didn't close the <div ng-include='template.html'> tag properly. Add the closing tag </div>.
I am working on a Backbone.js app and sending request to my API for JSON data to be show on the front end with Backbone Template.
The returned JSON has some HTML entities within the JSON array, and the HTML is getting printed as text.
Below is my template code:
{{#each this}}
<li>
<a > </a>
<section class="ip">
<p><% {{title}} %></p>
<h3>
<time class="timeago" datetime="{{pubDate}}"></time>
{{type}}
</h3>
</section>
</li>
{{/each}}
{{#unless this}}
<p>Der er pt ingen sociale opdateringer om denne artist</p>
{{/unless}}
Please help.
I'm not sure what templating engine you're using, but the syntax looks like Handlebars for the most part, so that's what I'm going to assume.
In order to escape HTML entities in Handlebars, you need to use {{{triple mustaches}}}
For example, you have JSON:
{
text: "<p>My paragraph</p>"
}
Your template might look like this:
<div>
{{{text}}}
</div>
And your output:
<div>
<p>My paragraph</p>
</div>
Let's say you have the following code to display some products images:
<ul>
<li ng-repeat="p in products">
<img ng-src="/images/{{p.img}}"/>
</li>
</ul>
Now let's say some products unfortunately don't have images, you may fix that with:
<ul>
<li ng-repeat="p in products">
<img ng-hide="p.img==undefined" ng-src="/images/{{p.img}}"/>
</li>
</ul>
Now go to the "network" tab of firebug or chrome developer tools and check for the images download -- you will see errors, because the browser still tried to download the non-existent image. It's hidden and the users won't notice, but of course it's bad: bad practice, bad for server performance, bad bad bad...
What is the correct "angular" solution for this?
An alternative to #Arun's solution is to use ng-switch or ng-if (available in v1.1.5), which add/remove DOM elements, unlike ng-hide/ng-show:
<ul>
<li ng-repeat="p in products">
<span ng-switch="p.img==undefined">
<img ng-switch-when="false" ng-src="/images/{{p.img}}"/>
</span>
</li>
</ul>
See #Rob's answer for an example using ng-if.
With version 1.1.5 you can use ng-if as #Abilash suggests:
<img ng-if="p.img" ng-src="/images/{{p.img}}"/>
You can do something like
<ul>
<li ng-repeat="p in products | imgsrc">
{{p.img}}
<img ng-src="/images/{{p.img}}"/>
</li>
</ul>
app.filter('imgsrc', function(){
return function(data){
var a = [];
angular.forEach(data, function(v, i){
if(v.img){
a.push(v);
}
});
return a;
}
});
Demo: Fiddle