Exploring 2D arrays in AngularJS - A comprehensive guide

I have the following array declared in my JavaScript file

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.tempArr = [
      ["block A1", "block B1", "block C1"],
      ["block A2", "block B2", "block C2"]
    ];
}

Now, in Angular, I want to loop through this array and display the result like

block A1 block B1 block C1
block A2 block B2 block C2

I tried to achieve this by:

<div ng-controller="MyCtrl">
 <div>
  <div ng-repeat="row in tempArr">
      <input type="text" value="{{row[$index]}}">
      <input type="text" value="{{row[$index+1]}}">
      <input type="text" value="{{row[$index+2]}}">
  </div>
 </div>
</div>

But it doesn't display "block A2". How can I fix this problem?

Answer №1

To properly organize your ng-repeat directives, you can nest them like this:

<div ng-repeat="row in data">
    <div ng-repeat="col in row">
        // insert your code here
    </div>
</div>

Alternatively, you have the option to flatten your 2D array into a single array and use just one ng-repeat directive for it.

Answer №2

Enhance the nested ng-repeats to thoroughly traverse through your arrays by using this structure:

<div ng-repeat="row in tempArr">
    <div ng-repeat="col in row">
        <input type="text" value="{{col}}">
    </div>
</div>

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

Error: React Select input control is throwing a TypeError related to event.target

Having trouble changing the state on change using a React Select node module package. It works with regular text input, but I can't quite get it to work with this specific component. The error message "TypeError: event.target is undefined" keeps poppi ...

Sending JSON data through an AJAX call results in an empty array being received

Recently, I've been attempting to send data through ajax using the following information: var jsondata = {"address" : [ { "id": addid, "streetaddress": streetaddress, "city": city, "state": state, "zipcode": zipco ...

Adding a property conditionally in jsx: A guide

I have a simple example of Material UI RadioGroup code that I want to display conditionally in either a row or column format. By default, it is displayed in column format. Below is the code snippet: <RadioGroup aria-label="gender" name=&q ...

Does adding the async attribute to a script impact the timing of the onload event?

I am facing an issue with a webpage that contains a script tag in the HEAD section: <script src="somescript.js" type="text/javascript" async></script> Since it has the async attribute, this script loads asynchronously, allowing the browser to ...

The convergence of lighttpd with AngularJS's html5 mode offers a powerful

My angularJS website is hosted on a lighttpd server, but the html5 mode encounters a 404 error when I refresh or use a direct link. On my local Apache server, everything works fine and there are no issues with the rewrite expression in the .htaccess file. ...

Designing a query feature to explore a Sequel Database utilizing a 'RETRIEVE' approach

In my index.erb, I've created a search bar with the following code: <nav> <div class="nav-wrapper"> <form> <div class="input-field"> <input id="search" type="search" placeholder="Search..." required> ...

Obtain the present location of the cursor within the TinyMCE editor

Despite various attempts, I have struggled to determine the current cursor position inside TinyMCE. My goal is to implement a change control feature that captures the starting point of text entry within the TinyMCE "textarea," allowing me to save the ente ...

Displaying the active navigation element in ApyCom JavaScript jQuery menu: tips and tricks

Currently, I am utilizing the jQuery navigation menu from ApyCom. Everything seems to be functioning properly except for one issue. Whenever I click on a different navigation element, I expect that element to remain highlighted in order to indicate to the ...

Using AngularJS to hide elements within a nested dictionary structure

My dictionary structure is as follows: var data = { a: [1, 2, 3, 4, 5], b: [ [1, 2], [3, 4], [5, 6] ] }; Currently, I am using ng-hide to hide an element if the value 2 exists in data->a. Here's how it's implemented: <i ...

Implementing Alloy-Script/Javascript in dynamically loaded JSP files

I have been loading various JSPs dynamically using an Ajax call, but after the JSP is loaded, none of the JavaScript inside seems to be working. I suspect this is because the script has not been parsed yet. To address this issue, I came across the "aui-pa ...

How can I ensure my AngularJS Controller variable is accessible across all page contexts?

Working with AngularJS, I have a view controller where I initialize a variable called recipesData. Here is the code for the controller: (function() { 'use strict'; angular .module('myApp') .controller('Coo ...

Creating a minigame using JQuery (Javascript)

I am currently developing a collection of mini-games for my big project. The approach I've taken in creating this mini-game is similar to one I used previously. However, unlike my previous version which only had one PuzzleContainer, this new iteration ...

Utilizing Django to Showcase Images within DataTables and ListView

I am trying to incorporate a thumbnail image in a jQuery DataTables. A thread on Stack Overflow 1 suggests adding a js render function to the .DataTable settings. I want to implement this solution in a standard way, using Django's class-based ListVi ...

What exactly is the purpose of calling upon 'express' - a reference to a function or an object?

It is my belief that by utilizing var express = require('express');, the variable express receives a function reference of createApplication(). So, when we invoke express(), it will yield an app object. However, my question is, if var express is ...

Using jSLint in combination with Angular leads to an unexpected error regarding the variable "$scope"

When performing a jSLint check on my Angular-based app, I encountered an "Unexpected '$scope'" error. To replicate the issue, you can try inputting the code snippet below into jslint.com. I'm puzzled as to why the first function declaration ...

Enhance your <head> section by adding lines when utilizing Layouts within Iron Router

Is there a way to add more lines to the <head> section using Iron Router and layouts? Take for example, inserting the following code snippet into the <head>... <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed ...

I could use some direction on implementing csrf token security measures for API communication between AngularJs and Slim PHP

I am currently in the process of developing a mobile application using AngularJS for the frontend, SlimPHP as the API provider connecting to Mysql. The frontend and backend are hosted on separate domains. When a user submits the login form from Angular, ...

Manipulating divs by positioning them at the top, left, right, bottom, and center to occupy the entire visible portion of the page

Many suggest avoiding the use of table layouts and opting for divs and CSS instead, which I am happy to embrace. Please forgive me for asking a basic question. I am looking to create a layout where the center content stretches out to cover the entire visi ...

ng-scrollbars may encounter difficulties when used within ng-view

Issue: I am experimenting with utilizing ng-scrollbars, a wrapper for Malihu's jQuery Custom Scrollbar by Manos Malihutsakis within an angular environment. Error: When implementing ng-view, vertical scrolling malfunctions (horizontal scrolls fine). ...

What is the best way to send a parameter to the callback function of a jQuery ajax request?

I am facing an issue where I need to pass additional variables to a jQuery ajax callback function. Consider the following scenario: while (K--) { $.get ( "BaseURL" + K, function (zData, K) {ProcessData (zData, K); } ); } func ...