Determine the Number of Iterations in ng-repeat within AngularJS

Can ng-repeat be used to create a grid of consecutive numbers?

One way to generate a grid is by using two ng-repeats in this manner:

<table>
  <tr ng-repeat="c in [1, 2, 3]">
    <td ng-repeat="r in [1, 2, 3]">
            {{c * r}}
        </td>
    </tr>
</table>

This code snippet produces the following output:

1    2    3
2    4    6
3    6    9

However, the desired output is:

1    2    3
4    5    6
7    8    9

Is there an alternative angular directive that would be more appropriate for achieving this result?

Answer №1

<table>
  <tr ng-repeat="c in [0, 1, 2]">
    <td ng-repeat="r in [1, 2, 3]">
            {{c * 3 + r}}
        </td>
    </tr>
</table>

If the initial array should remain unchanged:

<table>
  <tr ng-repeat="c in [1, 2, 3]">
    <td ng-repeat="r in [1, 2, 3]">
            {{(c-1) * 3 + r}}
        </td>
    </tr>
</table>

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

Newly inserted JSON component remains invisible

I am currently using express.js to create an API. My mongoose is returning a JSON object and I need to append an element to each item in the result.docs. This is how I am attempting to achieve that: for(let a in result.docs) { result.docs[a].link ...

The issue of excessive recursion in Typescript

Currently, I am in the process of learning Typescript while working on some exercises. While attempting to solve a particular problem, I encountered an error related to excessive recursion. This issue arises even though I created wrapper functions. About ...

Issue encountered during testing does not appear in final compilation and prevents tests from executing

Embarking on my maiden voyage with Angular 5... Currently in the process of setting up a Jasmine test tutorial found at this link: https://angular.io/guide/testing. However, upon initiation, an error throws me off course: ERROR in src/app/pizzaplace.serv ...

The Node.js code is failing to run as anticipated

I have been working on the following code snippet. My goal is to store the numbers after each iteration of the outermost while loop in an array named sn. However, after each iteration, sn only contains the numbers from the last iteration. I suspect I might ...

Exploring nested arrays in JSON through iteration

Here is the JavaScript code I am working on (the "data" variable is retrieved from a json call): if (data.projectReports.length) { for (var i in data.projectReports){ var report = data.projectReports[i]; $('#reports').append( & ...

Expanding the functionality of Three.js classes

I need help figuring out how to extend the Object3D class in Three.js. I've been trying to follow a Stackoverflow question on this topic, but despite multiple attempts, I haven't been successful. Is there a way to extend a ThreeJS object? If a ...

What is the best way to enable object references in Node modules?

I've been working on my Express.js web app and I've realized that as I extract parts of my code from the main app.js file into separate modules, I sometimes need to access objects from the main file. I'm trying to figure out the best way to ...

Tips for swapping a component with another component in React.js without the need for a page refresh

class Navigation extends Component { constructor(props) { super(props); this.state = { width: window.innerWidth, } } updateWidth = () => { if (this.state.width > 700) { this.setStat ...

Combine dom and sDom settings together to optimize the display of your content

Trying to implement a dataTable with specific features: Include a search box in the navbar Show table row status at the top of the table Despite numerous attempts, I have been unable to successfully integrate both features into my dataTable simultaneous ...

Avoid re-running the onScroll function until completion

I have a unique idea for a slideshow where the slides fade in and out as the user scrolls up or down. The process involves detecting scroll movements and showing the next slide based on the direction of the scroll. The user scrolls using the scrollwheel ...

What could be the reason for this code not changing the original array? Illuminate Express API

I encountered a strange issue while working on an Express API. I need to retrieve a list of posts from the MongoDB database and then add a new property to each post object before returning it to the client. Despite my efforts, I am not able to successfull ...

Unexpected jQuery error: Uncaught TypeError - Invocation not allowed

Yesterday, the code was functioning perfectly, but today it suddenly started throwing an error: Uncaught TypeError: Illegal invocation I'm struggling to pinpoint where exactly the issue lies. function createFile() { var selected_retailer_uui ...

The observable object fails to update the view in Knockout

I'm struggling with this error and need some assistance. I've been working on it for a while, but haven't made any progress. Any help would be greatly appreciated! Thanks! Error: VM4705 knockout-debug.js:3326 Uncaught ReferenceError: Unabl ...

How can I conditionally disable a button in Vue.js using an if statement?

Can someone help me figure out why all my buttons are getting disabled when I only want one to be disabled? Here is the code where I created a counter with vue.js: <body> <div id="app"> <button @click="co ...

A guide on how to activate an event when a radio button is selected using jQuery

I experimented with implementing this. When I try clicking on the radio button, the code functions correctly, but the radio button does not appear to be checked and remains unchanged. Any ideas on how to resolve this issue? <p> <input id="p ...

Why isn't Freichat displaying the name of the user who logged in?

After creating my own small social networking site, I decided to add a chat script called freichat. However, I am facing an issue where when a user logs in, their name appears as "Guest102" instead of their actual name. I am quite confused by this problem ...

Issue with function execution within useEffect() not being triggered

I am facing an issue where two functions in my component are not being called every time it renders, despite my efforts. Placing these functions in the dependency array causes an infinite loop. Can anyone identify why they are not executing? function Por ...

VueJS component experiencing stagnant DOM updates

I have reviewed similar posts on "DOM not updating", but have yet to find a solution. I am working on a task app and it can successfully load, add, and delete tasks from Firestore. However, I'm facing two issues and would like to address the first one ...

"Encountering surprising outcomes while utilizing the csv-parser module in Node.js

I am struggling to fetch the headers of a CSV file and store them in an array using the csv-parser module. There are two main issues I'm encountering: 1) I can't seem to figure out why the console.log statement at the end of the code block is ex ...

Leveraging EJS for embedding Google Maps API on a website

Currently, I am utilizing EJS to display the Google Maps API on a particular webpage. <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="map"></div> <script> var ...