How can AngularJS achieve ng-repeat functionality with multiple variables similar to ng-init?

When using ng-init, you have the ability to utilize multiple variables:

ng-init="var1=value1; var2=value2"

I attempted something similar with ng-repeat but unfortunately it did not work as expected

ng-repeat= "var1 in var1s; var2 in var2s"

Is there a proper syntax to achieve this?

Update: My goal is to assign var1 for the header and var2 for the content of an accordion component. You can find an example here: http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_accordion

Answer №1

It has been mentioned by others that ng-repeat is designed to work with a single variable at a time. However, there is a clever solution where you can use ng-repeat on an object with multiple keys representing the variables you want to access. Here is an example of how the view could be structured:

<div ng-repeat="item in dataObject">
    {{item.variable1}} {{item.variable2}}
</div>

Your controller would then have a scoped variable named dataObject containing multiple keys such as variable1 and variable2.

Answer №2

Sorry, but it is not possible to utilize two ng repeat variables separated by a semicolon in the same way as ng-init.

The ng-repeat directive only functions with a single variable that is an array. If you need to iterate over two distinct arrays, you can implement a nested-ng-repeat.

Alternatively, combine your two arrays into one using key,value. This will allow you to use ng-repeat on key,value and access them accordingly.

DEMO USING NESTED NG-REPEAT

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

Angular: the page continues to display outdated information after using router.navigate

My web app allows users to select products to purchase. They can pause the configuration process and resume it later. Currently, I am using localStorage to store information about the products and their prices. There is a page in my app that displays a ta ...

Uploading files with Ajax in PHP

Illustration of my Ajax script: Script <script type="text/javascript> $(document).ready(function(){ $('.costExcel').on("submit",function(event){ event.preventDefault() var url = "ajax.php"; ...

Create a submit button using Vue.js for text input

Can anyone help with a beginner question? I have a form that includes a text field. When I type something in and press enter, no result shows up. However, when I type something in and click the button, I get the desired result. Could someone guide me on ...

Issue with event binding on datepicker that is dynamically added is not functional

I have integrated the Kendo datepicker into my project, and I am facing an issue with duplicated div elements containing datepickers. The problem is that the datepicker events only fire once on the first duplicated div and then stop working altogether. I ...

Text parsing with jQuery

Hello fellow developers. I am interested in creating a text parser using jQuery. My goal is to develop a function that can take a string as input and convert it accordingly. Imagine we have a div with the following HTML structure: <div class="item"> ...

How can I add a character at a precise location while keeping the existing tags intact

Latest Update After further testing, it seems that the code performs well with a faux spacer, but runs into issues with the regex. The following scenarios work correctly: Selecting words above or below the a tag Selecting just one line directly above or ...

React's createPortal function does not place the child element inside a container

My new to-do list app in React has a simple functionality where clicking a button should add a new item to the list. However, I am facing an issue with the createPortal method not triggering the UI to render the new item. Here's the code snippet causi ...

The logs of both the frontend and backend display an array of numbers, but surprisingly, this data is not stored in the database

I am attempting to recreate the Backup Codes feature of Google by generating four random 8-digit numbers. for(let i = 0; i < 4; i++) { let backendCode = Math.floor(Math.random() * (99999999 - 10000000 + 1) + 10000000); backendCodes.push(back ...

Tips for ensuring that the headers remain fixed in both the horizontal and vertical directions while allowing the data

I have been trying to create a table with a fixed header (meaning the header must be visible both vertically and horizontally). The table should be scrollable It should have a horizontal header The vertical header should match the horizontal header When ...

Saving JSON format in VueX State Management

I'm relatively new to using Vue/VueX and I am exploring methods for storing JSON data in the VueX state. Initially, it seemed like a simple task: state { jsonthing: { ... } } However, I encountered an issue where getters return an Observer type ins ...

What could be the reason my mat-form-field is not displaying the label?

I'm currently working on a project using Angular Material to build a web page. I am facing an issue with the mat-form-field component as the label is not displaying, and I can't figure out why. Any assistance would be greatly appreciated. Thank y ...

What is the best way to increase a specific value in an array of objects once it has been located (using findOne()), but before it is

I'm looking for a more efficient way to update an object within an array of schemas in one database request instead of two. Currently, I use findOneAndUpdate() to increment the field if the object already exists, and then I have to use update() if the ...

Issue with CoffeeScript and three.js: scene not defined

I've been troubleshooting this issue for hours, but I can't seem to figure out the error... Here's the error message I'm getting: Cannot read property 'add' of undefined Below is my coffeescript code file (hopefully it&apos ...

Error: Unable to access the 'sid' property because it is undefined

I've been facing an issue where sending an SMS through Twilio's API Explorer works fine, but fails under my node installation. Despite a complete uninstall and reinstall, the problem persists. Error 7 Oct 21:28:37 - [nodemon] starting `node scr ...

Jasmine - effectively mimicking an object that utilizes a constructor

Currently, I am attempting to simulate the native WebSocket in a jasmine test for Angular. I have successfully spied on the constructor and `send` function, but I am struggling to figure out how to fake a call of `onmessage`. The WebSocket has been extrac ...

Subprocess capacitor encountered a hiccup while initiating the creation of a fresh Ionic project

Recently, I encountered an issue while working with Ionic Framework and AngularJs. Everything was running smoothly until I tried creating a new project using Ionic/Angular js. The problem arose with the capacitor, as seen below: https://i.stack.imgur.com/ ...

Why am I encountering a type error in NodeJS when utilizing the ping module?

I'm currently working on creating a simple app for pinging an IP address. The HTML form I've created has one input field for the IP address, which is then sent to NodeJS for processing. I am utilizing the ping module to retrieve the results. Ever ...

How to detect changes in Angular 2 using a separate service

Within my AuthService, I store real-time user data and a method for logging in. When the 'Login' button is clicked, the AuthService is called to retrieve updated user data from the server and update the value of 'this.user'. As a resul ...

Arrange an asynchronous function in Node.js

I have been attempting to set up a schedule for an asynchronous function (with async/await return type) to run every two minutes. Although I have tried using the generic setInterval, as well as various node modules such as node-schedule, cron, node-cron, ...

What is the process for accessing a URL using a web browser and receiving a plain text file instead of HTML code?

Hello there! I've created a simple HTML file located at that can display your public IP address. If you take a look at the code of the page, you'll notice that it's just plain HTML - nothing fancy! However, I'm aiming for something mo ...