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

How can I expand all nodes using breezejs?

Is it possible to expand all child nodes within an entity using the breezejs query statement, perhaps even up to 2 levels deep? The situation is that I am creating a partial entity for the list page, but when editing a single entity, I want to display all ...

Discover the method to retrieve the chosen value from a list of radio buttons using AngularJS

After making an AJAX request and receiving JSON data, I have created a list of radio buttons with values from the response. Although I have successfully bound the values to the list, I am facing difficulty in retrieving the selected value. Below is a snipp ...

What is the most effective way to include JavaScript code in a PDF file?

What is the process for integrating JavaScript code into a PDF document? I am familiar with coding in JavaScript and would like to learn how to add it to a file in order to perform tasks such as displaying the current date or using a combobox. ...

When refreshing the page, the authentication token set in the Vuex store using axios in Nuxt.js/Vue.js gets reset

Here is the code snippet I am using to manage login, logout, user retrieval, and token setting for all axios requests as an auth header. While this code works perfectly during client-side rendering - such as logging in, storing the token in cookies, etc. ...

Dividing AngularJS Module Components into Separate Files

I've been working on developing an AngularJS application and I'm currently facing a challenge in creating a reusable module that can be integrated into other projects. The module consists of services and directives that are distributed across sev ...

In my React JS class component, I am looking to have the image display switch each time the button is clicked

How can I change the image when clicking a button in a class component? I am familiar with function components, but unsure how to achieve this. class CoffeeImages extends React.Component{ constructor(props){ super(props) ...

Encountering an issue with a loop in my jQuery function - any solutions?

Having encountered an issue with a select object not working in my form-building function, I resorted to using an ajax call to fetch data from a database table. While the network tab in Chrome shows the data being retrieved successfully, the console displa ...

Troubleshooting: Style not applying in AngularJS hello world application

I am relatively new to working with AngularJS and am attempting to showcase a basic "hello world". However, instead of displaying the expected output, it shows: {{"hello" + " world"}}. app.js: var app = angular.module('store', []); defaultLayo ...

Updating Angular 1 TypeScript 1.8 Application with Webpack 2 may lead to issues with displaying views

I previously had success working on a project using Angular 1, TypeScript 1.8, and Material Design with Webpack 1 handling the build process. However, after attempting to upgrade to Webpack 2.2.1 and TypeScript 2.2.1, I encountered issues with my app&apos ...

Achieving functionality with a fixed header

I am struggling with the scroll functionality and smooth transition in my code for a sticky header. The scroll doesn't work smoothly, especially when the fixed header is activated. The #top-nav-wrapper barely scrolls as expected: <script> $(doc ...

Error encountered in AngularJS when utilizing the Flickr API with the parameter "nojsoncallback=1": Unexpected token Syntax

My AngularJS application is trying to access the Flickr API. I need the data in RAW JSON format without any function wrapper, following the guidelines provided in the documentation by using &nojsoncallback=1. However, I keep encountering a console er ...

Combining AngularJS with JWT and either WCF or WebAPI creates a powerful and

I am currently working on a small AngularJS application that utilizes AngularJS, TypeScript, and HTML5 for the user interface. I have successfully connected the UI to retrieve data from a Restful WCF service (written in C#). Everything is working well so f ...

Exploring Vue JS: Decoupling variables in separate files and effective ways of accessing them

In my Vue project, I am looking to create a dedicated .js file to store multiple variables that can be easily accessed by other components. I am seeking advice on the most efficient method to achieve this and would greatly appreciate any examples provide ...

Finding the Attachment ID on a JIRA Issue Page with JavaScript

Currently, I am using an ajax call that requires the attachment id in its URL. The URL is hardcoded as follows: url: AJS.contextPath()+"/rest/api/latest/attachment/10415" jQuery.ajax({ url: AJS.contextPath()+"/rest/api/latest/attachment/10415", TYPE: "GET ...

Deploy Node.js on a Debian server hosted on Google Compute Engine

Currently, I am operating a Debian server on Google Compute Engine using a host called example.com. My goal is to run a node.js app within a specific directory on this server, for instance, example.com/mynodeapp. Fortunately, the necessary components such ...

Once the Ajax request is finished, the cookie deletion function ceases to function

When the website loads, a cookie is generated using PHP before any other content or headers are sent. This is done with the following code: $steam_login_verify = SteamSignIn::validate(); if(isset($_COOKIE['userid'])) { //work with cookie va ...

Can the name of the ngx-datatable-column be altered?

I recently started developing an angular2 web application that includes a ngx-datatable component. The header columns all have numeric names, but I would like to customize them in the view. Despite my efforts to research this issue, I haven't come ac ...

Is it necessary to clean up the string to ensure it is safe for URLs and filenames?

I am looking for a way to generate a URL-safe filename in JavaScript that matches the one created using PHP. Here is the code snippet I currently have in PHP: <?php $clean_name = strtr($string, 'ŠŽšžŸÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÑÒÓÔÕ ...

Implementing experimental decorators and type reconciliation in TypeScript - A step-by-step guide

My basic component includes the following code snippet: import * as React from 'react'; import { withRouter, RouteComponentProps } from 'react-router-dom'; export interface Props { }; @withRouter export default class Movies extends R ...

Can you help me identify the issue with my current Jade for loop implementation?

Here is my full loop code written in Jade: block content div(class='row') div(class='col-lg-12') h1(class='subject') 로또라이 div(class='row') div(class='col-lg-8') - for (var ...