Working with ng-model on an array with multiple dimensions

Currently, I am working on storing data in AngularJS. My table consists of various sections, rows, and columns.

In each field, there is a dropdown list with the options "O", "T" or "E". My goal is to store these values in an array format: [section][row][column] - for example, [0][0][0] = "E".

Here is how I have attempted to store the values:

<select id="{{$parent.$parent.$index}}_{{$parent.$index}}_{{$index}}"
    ng-change="changePollValue()"
    ng-model="selectedValues[$parent.$parent.$index][$parent.$index][$index]" ...>

However, AngularJS seems to be creating nested objects within a one-dimensional array, like this:

"selectedValues" : [ {
              "0" : {
                "0" : "E",
                "1" : "T",
                "2" : "O",
                "3" : "E",
                "4" : "T"
              },
              "1" : {
                "0" : "O",
                "1" : "E",
                "2" : "T",
                "3" : "O",
                "4" : "E"
...

The initialization of "selectedValues" is done as follows: $scope.selectedValues = [];

Any suggestions or advice on how to address this issue?

javascriptangularjsarrays

Answer №1

It seems like your desired outcome is a matrix, and the process to create a matrix in javascript differs from what you may think. To construct a three-dimensional matrix, follow this format:

$scope.matrix = [[[]]];

This code snippet signifies a parent array containing a child array (forming a simple matrix), followed by another child array (a grandchild to the parent array), resulting in a three-dimensional array. Here's an example of defining a triple dimensional array with children and grandchildren:

$scope.matrix = [
  [
    [
      { selectedOption: '0-0-0' },
      { selectedOption: '0-0-1' },
      { selectedOption: '0-0-2' }
    ], [
      { selectedOption: '0-1-0' },
      { selectedOption: '0-1-1' },
      { selectedOption: '0-1-2' }
    ]
  ], [
    [
      { selectedOption: '1-0-0' },
      { selectedOption: '1-0-1' },
      { selectedOption: '1-0-2' }
    ], [
      { selectedOption: '1-1-0' },
      { selectedOption: '1-1-1' },
      { selectedOption: '1-1-2' }
    ]
  ]
];

In this scenario, the first digit corresponds to the parent index, the second digit (after the hyphen) refers to the child index, and the third index (after the last hyphen) points to the grandchild index. For instance, 1-1-1 indicates the second parent (zero-based index), the second child, and the second grandchild.

To better understand how to manage this structure, I have provided an illustration on codepen.

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

Changes made to the data are not reflected in the user interface, but they are visible in the console

When working on a React project with input fields, I encountered an issue where the date data can be changed but doesn't get reflected in the UI. Instead, the updated data is visible in the console. The code snippet below showcases how I'm using ...

javascriptreactjsreact-datepicker

Step-by-step guide on how to showcase elements within v-for by clicking on them

In my data array, only the first element is visible by default. Clicking on either the YES or NO button will display the element with the corresponding id of yes_section or no_section (depending on which button was clicked). For instance, if we click on ...

javascriptvue.js

Steps on removing a file type from a Material UI textfield

I've been struggling to figure out how to clear a Material UI textfield with type="file" even after trying multiple approaches. My issue arises when I set a file size limit and display an error message if a user tries to upload a file larg ...

javascriptreactjsmaterial-ui

Organizing an array in JavaScript that includes both version numbers and letters, with each letter representing a specific numerical value

If given an array similar to this one: input = [ "1.1", "1.c", "1.b", "1", "D", "b", "4", "2.1.2", "5.1", "3", & ...

javascriptarrayssorting

What are some solutions for repairing unresponsive buttons on a webpage?

My task is to troubleshoot this webpage as the buttons are not functioning correctly. Here’s a snippet of the source code: <!DOCTYPE html> <html lang="en"> <head> ... </head> <body> <div id="container" ...

javascripthtmlcssbarcode

A method for integrating a Child Component into a UI5 parent application without specifying them in the manifest.json

Seeking advice on loading a Child Component in a UI5 parent app. Currently working on creating a Fiori Launchpad that can dynamically load other apps as Child Components. I have been exploring methods mentioned in an insightful post at However, the imple ...

javascriptsapui5sap-fiorijs-amd

The HTML checkbox remains unchanged even after the form is submitted

On a button click, I have a form that shows and hides when the close button is clicked. Inside the form, there is an HTML checkbox. When I check the checkbox, then close the form and reopen it by clicking the button again, the checkbox remains checked, whi ...

javascriptjqueryhtmlasp.netcheckbox

Learn how to verify changing form inputs with Vue watchers. The challenge of numbers

Currently, I am working on a sum application and encountering some challenges with input validations. I have implemented Watcher to handle the validations, and I am exploring the possibility of adding sound and color feedback for accurate validation. Repo ...

javascriptvue.jsvalidation

Is there a way to call a Vue function from an onclick event in JavaScript?

Creating a vue component and trying to call a function defined in Vue methods using the onClick attribute when modifying innerHTML is resulting in an error message stating "showModal is not defined". Here is the showModal function where I'm simply try ...

javascriptfunctionvue.jsonclick

variable identifier looping through elements

I'm attempting to assign a dynamic ID to my div using ng-repeat. Here's an example: <div id="$index" ng-repeat="repeat in results.myJsonResults"> <div id="$index" ng-click="saveID($index)" ng-repeat="subRepeat in results.myJsonResul ...

javascripthtmlangularjs

What is the mechanism behind the functionality of the .any() method in Python?

Looking to create a script that models the behavior of chemical reactions over time. One key input is an array like this: popul_num = np.array([200, 100, 0, 0]) This array represents the number of molecules for each species within the system. The main fun ...

pythonarraysnumpyif-statementany

The timer will automatically refresh when the page is refreshed

Currently, I am encountering an issue while working on a quiz application in PHP. The problem arises when users start the test and the timer is running correctly. However, when users move to the second question, the timer resets again. Below is the code sn ...

javascriptphpjquery

Custom input field in Material UI not communicating properly with Redux form

I am currently utilizing Material UI and React to implement a custom input field. While using redux form for form validation, I have encountered an issue where the onBlur and onFocus events are not being dispatched successfully. Interestingly, if I switch ...

javascriptreactjsmaterial-uiredux-form

Exploring the world of Vue.js object mapping

I currently have the following object: data: () => ({ customer: { item: { name: undefined }} }) This object is being used in the template as follows: <v-number separator="." decimal="2" ...

javascriptvue.jsobjecttemplates

Steps to partially open the Modal Sheet Swipe Step by default

I've set up a modal sheet component with the following structure: <f7-sheet class="myClass" style="height: auto" swipe-to-step :backdrop="false" > <div class="sheet- ...

javascriptvue.jshtml-framework-7

Can the functionality of two-way data binding be achieved in Angular without utilizing ng-model and ng-bind?

During an interview, I was presented with this question which sparked my curiosity. While I have a foundational understanding of AngularJS and its ability to enable two-way data binding using ng-model and ng-bind, I am interested in exploring alternative ...

javascriptangularjs

Empty text box

I've been attempting to clear ng-model inputs, but haven't had any success and I can't seem to figure out why. Here is what I have: <button ng-click="$ctrl.clear()"></button> And in the clear action, I have: $scope.$event = n ...

javascriptangularjs

The appearance of responsive CSS is altered when deployed compared to when it is viewed on the

I'm a beginner in web development and facing an issue with my mobile CSS. The strange thing is that when I view it on localhost, everything looks great, but once deployed (tried both Heroku and GitHub), it appears distorted. Even when I make extreme c ...

javascripthtmlcssgithubfrontend

When I try to make an on-demand revalidation API call on Vercel, it takes so long that it ends up timing

Inspired by Kent C. Dodds, I have created a blog using Github as my Content Management System (CMS). All of my blog content is stored in the same repository as the code, in mdx format. To streamline the process, I set up a workflow that detects changes i ...

javascriptnext.jsvercel

Analyzing a JSON Structure Containing Numerous Sub-Objects

<script type="text/javascript" src="http://static.stackmob.com/js/2.5.3-crypto-sha1-hmac.js"></script> <script type="text/javascript"> $j.ajax({ dataType : 'json', url : "/api/core/v2/groups/", //or any other res ...

javascriptjqueryjson