Using AngularJS to bind models to a multidimensional array

As I am new to angular js, please bear with me. In my view, I have a grid of text input boxes that I would like to map to a 2D array in my controller or something similar in java script. The code in my view is as follows:

<div ng-repeat="row in [1,2,3,4,5,6,7,8,9]" class="row">
                <div ng-repeat="column in [1,2,3,4,5,6,7,8,9]" class="col-sm-1 no-padding">
                    <input type="text" class="form-control" ng-model="puzzle.board[row][column]" name="cell[]">
                </div>
</div>

For initialization of the puzzle object in my controller class, I use the following code:

    $scope.puzzle = {}; 
    $scope.puzzle.dimensions = 9;
    $scope.puzzle.board = [$scope.puzzle.dimensions]
    for(var i=0; i<$scope.puzzle.dimensions; i++) {
            $scope.puzzle.board[i] = [$scope.puzzle.dimensions];
    }

However, even after entering values in the input fields, the cell value in the console still shows up as undefined. What could I be missing here?

Answer №1

Give this a try:


  $scope.game.grid = [];

  for (var x = 0; x < $scope.game.dimensions; x++) {
    $scope.game.grid[x] = [];
    for (var y = 0; y < $scope.game.dimensions; y++) {
      $scope.game.grid[x][y] = 0;
    }
  }

Make sure to start numbering from 0:

<div ng-repeat="row in [0,1,2,3,4,5,6,7,8]" class="row">
    <div ng-repeat="column in [0,1,2,3,4,5,6,7,8]" class="col-sm-1 no-padding">
        <input type="text" class="form-control" ng-model="game.grid[row][column]" name="cell[]">
    </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

Showing the value of a JavaScript variable within an HTML input field

Here is an interesting HTML structure that includes a list and input field: <li> <span>19</span> </li> <li> <span>20</span> </li> ...

Transform Array into an unordered list with list items

Currently, I am dealing with a file that contains strings of file paths in the following format: ./CatDV/S1/SFX/steam/6004_90_04 LargeHeadlightSm.wav ./CatDV/S1/SFX/steam/AirHissPressureRe HIT032001.wav ./CatDV/S1/SFX/steam/Impact_Metal_Bullet_Hit(1).wav ...

How can I retrieve the word that comes after a specific word in discord.js

Currently, I'm attempting to create a bot similar to Dad bot, but I'm struggling with implementing the "Hi __ I'm, Dad" feature. Here's the code snippet that I've put together so far: var imWords = ["i'm", "I&a ...

Why is it that when I use require.js, all my modules appear to be loading at once when the page first

During the development of my single-page backbone app using requirejs, I encountered an issue when deploying to our beta server. The initial page load took around 20 seconds as it had to fetch all the necessary scripts. I initially believed that this dela ...

Transmit information from the backend Node.js to the frontend (without using sockets)

Is there a method to transfer data from my socket, for example example.com:8000, to my web server that is not on the same socket at example.com/index.php? I've searched through various codes but have not come across any solutions yet. If you could pro ...

Problem with Jquery Colorbox in firefox

I am using JavaScript to dynamically populate anchor links in a repeater and displaying them in a colorbox iframe. This functionality is working well in IE7, Safari, and Chrome, but encountering an issue in Firefox (version 14.1). In Firefox, the links ar ...

Exploring various templates with AngularJS Directives

Let's delve into a slightly complex topic, but I'll simplify it as much as possible for you. There is a directive in play: .directive('configuratorRows', function () { return { restrict: 'A', scope: { ...

Preventing Vue.js SPA from accessing cached version when JWT expires: the solution

I'm encountering an issue with my Vue.js / Express application that I can't seem to resolve. Here's how the process unfolds: An unauthenticated user logs into the app and is presented with the login page. Once successfully authenticated, t ...

Data string not being converted correctly to date format

Here is a table I am currently working with: ID DateColumn 1 3/7/2019 5:29:38 AM 2 3/8/2019 5:28:38 AM 3 3/7/2019 5:30:38 AM 4 3/7/2019 5:31:38 AM The date column in this table is being processed as a string when bound to the grid. To ...

Is it possible for me to create a list in alphabetical order beginning with the letter B instead of A

My task involves creating a summary of locations using the Google Maps API. The map displays letters corresponding to different waypoints, and I have a separate <div> containing all the route information. Currently, I have the route information stru ...

Enhancing Dataset Quality: Incorporating Failed Results with Apify

We have implemented the Apify Web Scraper actor to execute a URL validation task that retrieves the input URL, the title of the page, and the HTTP response status code. Our testing includes 5 URLs - 4 valid ones and 1 non-existent URL. The successful resul ...

The multiple-choice selection tool is not displaying any choices

I am having an issue with my ng-repeat code in conjunction with the jquery multiple-select plugin. Despite using this plugin for a multiple select functionality, the options generated by ng-repeat are not visible. Below is the code snippet in question: & ...

Is it possible to include two functions within a single HTML script?

On my webpage, there are multiple tabs that display different sets of data. Below is the code for handling the functionality of these tabs: function openTab(event, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassNa ...

Incorporating Blank Class into HTML Tag with Modernizr

Currently, I am experimenting with Modernizr for the first time and facing some challenges in adding a class to the HTML tag as per the documentation. To check compatibility for the CSS Object Fit property, I used Modernizr's build feature to create ...

Ways to merge values across multiple arrays

There is a method to retrieve all unique properties from an array, demonstrated by the following code: var people = [{ "name": "John", "age": 30 }, { "name": "Anna", "job": true }, { "name": "Peter", "age": 35 }]; var result = []; people. ...

What is the proper way to display the complete result of aggregating each outcome from the previous iteration within two nested queries in an array using NodeJS and Mongoose?

As a newcomer to both Stackoverflow and NodeJS/Mongoose, I apologize if I make any mistakes or break any rules. Thank you in advance. I'm looking for a function that can return all nearby products based on my current location, which is provided by th ...

When a user clicks on a React listItem, the information for that specific item is displayed using

As a beginner in the coding world, I am currently learning about React and JSON. My project involves working on three interconnected panels. Specifically, I aim to showcase checklist answers on the third panel. First Panel: Displaying: All the ESN ("46 ...

Unexpected behavior with VueJS Select2 directive not triggering @change event

Recently, I implemented the Select2 directive for VueJS 1.0.15 by following the example provided on their official page. However, I am facing an issue where I am unable to capture the @change event. Here is the HTML code snippet: <select v-select="ite ...

Error: Unable to locate module adaptivecards-templating

After adding the module through the command: npm install adaptive-expressions adaptivecards-templating --save and importing it, I encountered an error when trying to run my application: ...

Retrieve the property of an object from within an array

I am dealing with an array structure like this: const arr = [{ name: 'One', id: 1 }, { name: 'Two', id: 2 } ]; My goal is to extract and return the name of the object if its id matches a certain value. After exp ...