0

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?

Grammin
  • 11,808
  • 22
  • 80
  • 138

3 Answers3

1

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

Anthony Chu
  • 37,170
  • 10
  • 81
  • 71
  • 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. – Brian Vanderbusch Mar 01 '14 at 06:34
  • This is correct according to Angular docs (http://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 `
    `, but the single quotes are still okay.     – Anthony Chu Mar 01 '14 at 06:45
  • 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 Mar 01 '14 at 07:18
  • removed my dv as a result. Misread it as a evaluation instead of a string. Thanks! – Brian Vanderbusch Mar 01 '14 at 07:29
0

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.

Brian Vanderbusch
  • 3,313
  • 5
  • 31
  • 43
0

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}}">
MASIVO DE OCCIDENTE
  • 13
  • 1
  • 3