I have the following code:
<div ng-repeat="item in items">
<div ng-include src="itemG.html"></div>
</div>
then in itemG.html I have:
<img src="{{item.image}}">
How can I get my ng-repeat to print out all of the images?
3 Answers
There are 2 potential problems in the code...
src="itemG.html" needs an extra pair of single quotes like this:
<div ng-repeat="item in items">
<div ng-include="'itemG.html'"></div>
</div>
And the img tag is missing a closing ":
<img ng-src="{{item.image}}">
Plunker: http://plnkr.co/edit/7IUs7WPdUYkfVVKtBN1m?p=preview
4 Comments
Brian Vanderbusch
this is incorrect. using the single quotes inside the regular
src attribute will only work for non-expressions. This means nothing that angular needs to bind to as well, which is the case here. You have to use {{ }} expression to bind, which means you also have to use ng-src instead.
Anthony Chu
This is correct according to Angular docs (docs.angularjs.org/api/ng/directive/ngInclude)... angular expression evaluating to URL. If the source is a string constant, make sure you wrap it in quotes, e.g. src="'myPartialTemplate.html'"; I also had this tested in a plunker as well but didn't post the link. I can recreate it if required. Rereading the docs I think the more correct form is
<div ng-include="'itemG.html'"></div>, but the single quotes are still okay.Brian Vanderbusch
lol... actually we're both right, and wrong, in our own ways. Look at what's in his .html file. I knew there was a reason I was thinking he was using a binding expression, just got all caught up in things and forgot the string was a string constant (which is why the quotes work)
Brian Vanderbusch
removed my dv as a result. Misread it as a evaluation instead of a string. Thanks!
Basically, what this comes down to is that the browser will interpret what inside the src attribute literally, until angular comes along to replace it. If you have a string constant, you can use single quotes inside the src="'myurl.html'", but if you have a value that needs to be bound by angular, you have to use ng-src and the expression syntax of {{ }}
You also need to bind a model to your template file itself. It's not going to pick up the bindings from your repeater without some help from either the ng-include event directives, or it's own model/controller/directive. There are too many different ways to demonstrate that, and it's also relevant on what markup is in your template file, which I can't say.
However, if the img tag is the only thing in that file, then instead of the file, I'd just do this:
<div ng-repeat="item in items">
<img ng-src="item.image" />
</div>
Since you're inside a repeat, it's already being included, making the ng-include redundant.
Comments
In principal code
<div ng-repeat="item in items">
<ng-include src="itemG.html" ng-controller="MyCtrl" ng-init="i=item"><ng-include>
</div>
then in itemG.html I have:
<img src="{{i.image}}">
itemG.htmlfile... is the only thing in there the one<img />tag?