0

I am trying to make two sections in my HTML repeat itself. The first section is supposed to repeat itself twice and the second section is supposed to repeat itself four times.

Here is what the second section in particular looks like(I want this to repeat four times) enter image description here

Here is my current progress - Fiddle( wo Angular JS applied to the second) and Fiddle 2(w AngularJS). I got the first section to repeat twice but when I apply the repeat directive to the second section, the second section disappears....

To accomplish both tasks, I used the AngularJS Ng-Repeat directive. I made sure to only bootstrap or initialize the Angular app once in a outer div that contains both sections. I followed syntax from Objects to group data together in JavaScript. I haven't read anything that says you can't have more than one ng-init(I used two to initialize data for the two sections)

<div id="rest_contents" data-ng-app=""> .....

Does anyone see an issue with my syntax or what I did wrong?

Community
  • 1
  • 1
committedandroider
  • 8,711
  • 14
  • 71
  • 126

1 Answers1

1

Check your console log, there is a syntax error with your sections list definition. You have pictorial= but it should be pictorial:

<div data-ng-init="sections=[{title: 'Campaign', pictorial:'campaign.png'},
         {title: 'TV Ads', pictorial:'tv_adds.png'} , {title:'Video Archive',pictorial: 'video_archive.png'},
    {title: 'House Showcases', pictorial: 'house_showcases.png'}]" >
logee
  • 5,017
  • 1
  • 26
  • 34
  • Thanks!!! Can't believe I forgot to do that. Did I structure everything right - directives, etc? – committedandroider Jul 08 '15 at 06:20
  • happens to us all, sometimes you just need a fresh pair of eyes. Structure looks right. Just a note, if you plan to use `pictorial` as the img src in the future, remember to use the `data-ng-src` attribute. – logee Jul 08 '15 at 06:42
  • Would I still need that attribute if I am getting the photos from within the working directory, not through the Internet? https://docs.angularjs.org/api/ng/directive/ngSrc – committedandroider Jul 09 '15 at 05:08
  • Pretty much whenever the image `src` value is going to be an evaluated angular model variable then use `ngSrc` regardless of where the photo is located. Not a train smash if you don't, but say you use `` then the browser will make 2 web requests. First one to the url `{{srcVal}}` which will be invalid of course and the second one once angular evaluates `srcVal`. If you use `ng-src={{srcVal}}` then the browser will only make 1 request once angular evaluates `srcVal` – logee Jul 09 '15 at 05:32