Unleash the power of nesting Angular ng-repeats to enhance your

I've designed a template that looks like this...

<div ng-repeat="itemEntry in itemEntry">
   <!-- content -->
    <section class="product-view-wrapper" ng-repeat="productView in itemEntry.Productview">
      <div class="slide" ng-repeat="productImg in itemEntry.productImgs">
        <img ng-src="{{productImgs.img}}"/>
      </div>
     <!-- Content -->
 </section>
 </div>

Can you nest two repeats inside an ng-repeat? If so, is the HTML structure correct based on the example above?

In addition, I have a JSON file structured like this:

    image: "http://www.colette.fr/media/push/swa_mmm_001255.jpg",
                                productTitle: "Ipath lowrunner",
                                productDesc: "Low skateshoes - Grey",
                                user: "knows",
                                price: "$17",
                                productImgs: [
                                                {img: "http://www.colette.fr/media/push/swa_mmm_001255.jpg"},
                                                {img: "http://www.colette.fr/media/push/paddin265.jpg"}
                                ]
                            },

However, when inspecting the element, I noticed the productImg content is not showing. Is the structure correct for double nesting an ng-repeat function?

Check out the demo for a more detailed example

javascriptjsonangularjsangularjs-ng-repeat

Answer №1

It appears that the nested repeat is not properly iterating over the correct array. I have simplified your code to focus solely on the relevant HTML related to this issue.

<section class="product-view-wrapper" ng-repeat="productObject in itemEntry">
  <!-- Each iteration of the <section> will display content from productObject found in the itemEntry array -->
  <h3>{{productObject.productDesc}}</h3>
  <img ng-src="{{productObject.image}}" height="120px">
  <h4>Repeating images</h4>
   <!-- We intend to iterate over the array within each productObject -->
  <div class="slide" ng-repeat="productImg in productObject.productImgs" style="float:left">
    <img ng-src="{{productImg.img}}" height="80px" />
  </div>
  <hr style="clear:both">

</section>

Check out the DEMO here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize Ramda.js to transform commands into a functional programming approach

I have written a code to convert an array of numbers into a new datalist using imperative style. However, I am looking to convert it to functional style using a JavaScript library like ramdajs. Code Background: Let's say we have 5 coins in total with ...

javascriptfunctional-programmingramda.js

W3C Validation with a Dynamic Twist

I currently have a small feature on my website that indicates the validity of the markup for the current page. It is currently set as "HTML5 Valid", but I am thinking about making it more dynamic. I want it to automatically check if the page's markup ...

phpjavascriptvalidationw3c

Is there a way to display multiple images in a JSON message object?

If you're looking for a fun way to generate random dog images, then check out my DogAPI image generator! Simply enter a number between 1-50 into the form text box, hit send, and watch as it displays that amount of random dog photos. I'm almost t ...

javascriptjqueryhtmljsonobject

Troubles with submitting jQuery validation plugin via AJAX

Whenever I try to use the jQuery validation plugin for validating a form within a Bootstrap modal, the validation does not work and the form cannot be submitted. This is the code for the Bootstrap modal form: <div class="modal fade" id="form-content" ...

javascriptjqueryhtmlajaxtwitter-bootstrap

The timing of the JavaScript dialog with the AJAX call is off-kilter

Encountering an issue with a JavaScript script designed to showcase a JQUERY dialog box based on a C# ViewModel. Within a repeater, there is an ASP drop-down menu displaying 'Registration Date' details. The objective is for the JavaScript dialog ...

c#javascriptajaxdialog

The slicing of jQuery parent elements

Hey there! I recently created a simulated "Load More" feature for certain elements within divs. However, I've encountered an issue where clicking on the Load More button causes all elements in both my first and second containers to load simultaneously ...

javascriptjquerycssjquery-selectors

A beginner's guide to implementing dot navigation within the Jackson JsonNode

Take a look at this code snippet: val parsedData = ObjectMapper().readTree(vcap) parsedData.get("spaces")?.firstOrNull()?.get("block1")?.asText() I'm interested in improving the readability of this code by using dot notation for navigation. Here&ap ...

javajsonkotlinjackson

Tips for optimizing the processing speed of large XML files using jQuery, Javascript, and PHP

Currently, I am developing a store overview page that displays about 20 products per page. The data for this page is sourced from a zipped (gzip) XML file (*.xml.gz). You can find the feed here: . Every day, I download this file to my server using PHP and ...

javascriptphpjqueryxmlgzip

Defining JSON Schema for an array containing tuples

Any assistance is greatly appreciated. I'm a newcomer to JSON and JSON schema. I attempted to create a JSON schema for an array of tuples but it's not validating multiple records like a loop for all similar types of tuples. Below is a JSON sampl ...

javascriptjsonjson.netjsonschema

Turn off the background when the automatic popup box appears

I have implemented a popup box that automatically appears after 5 seconds when the site is loaded. However, if I click outside of the popup box, it closes. I want to disable the background when the popup box is displayed. If I remove the two lines of code ...

javascriptjqueryhtmlcsspopupwindow

Adjust the background color using jQuery to its original hue

While working on a webpage, I am implementing a menu that changes its background color upon being clicked using jQuery. Currently, my focus is on refining the functionality of the menu itself. However, I've encountered an issue - once I click on a men ...

javascriptjqueryhtmlcssasp.net

Utilizing the reduce() function to simultaneously assign values to two variables from data input

Looking to simplify the following function using reduce(), as the operations for variables selectedEnrolled and selectedNotEnrolled are quite similar. I attempted to use map(), but since I wasn't returning anything, it led to unintended side effects ...

javascriptangulartypescriptrxjs

Error: FullCalendar does not display a header for the timeGridWeek view when the dates fall

Currently, I am integrating fullcalendar 5.5.0 with Angular 10. After migrating from fullcalendar v4 to v5, I noticed an annoying issue where the header for the date before the validRange start is no longer displayed: https://i.sstatic.net/kvVUW.png Thes ...

javascriptangularfullcalendarfullcalendar-5

Error: The function stripHtml cannot be found

Currently, I am developing a blog website using Next Js. I encountered an issue while creating a rich text-editor API for the blog. When attempting to utilize string-strip-html, an error message was displayed as follows: C:\Users\alami\OneDr ...

javascriptnode.jsreactjsnext.js

Incorporate a prefix into the URL of Angular development servers

When our application is in production, it will not be served from the root. Instead, it will be served from something like https://ourdomain.com/ourapp. This setup is causing problems with image URLs. To work around this issue, I am trying to serve the ap ...

javascriptangularserver

Utilizing JavaScript for enhancing the appearance of code within a pre element

Is there a way to dynamically highlight the code inside a pre element using vanilla JavaScript instead of JQuery? I'm looking for a solution that colors each tag-open and tag-close differently, displays tag values in another color, and attributes with ...

javascripthtmlpre

Tips for utilizing bind-once or angular-once within HTML element properties

Is it possible to stop the creation of angular watchers for element attributes by using the bind-once or angular-once directive? I have implemented the Angular Once directive in my project. How can I implement it in the following scenario? <div conte ...

angularjs

Why doesn't jQuery ajax work when sourcing the URL from a variable but works with a hard-coded URL?

During my experimentation with setting and getting the URL for a jQuery Ajax (post) call, I realized the value of dynamically setting the destination URL for the request. Here's how I attempted to achieve this: To set the URL to 'store.php' ...

javascriptphpjqueryajax

Only the initial TinyMCE editor that was added dynamically is visible, the rest are not showing

I am currently developing a javascript application that will showcase a real-time discussion thread. The app will regularly communicate with the server to fetch new data and display it on the page. To enable users to post comments and replies, we have deci ...

javascriptjquerytinymcewysiwygtinymce-4

Next.js production build encountering an infinite loading error

I have been utilizing the Next.js TypeScript starter from https://github.com/jpedroschmitz/typescript-nextjs-starter for my current project. The issue I am facing is that when I attempt to build the project after creating numerous components and files, it ...

javascriptreactjstypescriptnext.jsbuild