ng-model with multi-dimensional array

Question

I'm currently trying to store some data using AngularJS. I have a table with different sections, as well as rows and columns.

Each field has a dropdown-list, containing just the letters "O","T" or "E". What I want is to store these values in an array: [section][row][column] - e.g. [0][0][0] = "E".

This is how I tried to store the values:

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

Unfortunately, AngularJS is creating nested objects inside of 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"
...

"selectedValues" is initialized like $scope.selectedValues = [];

Any advice on this?

Bruno · Accepted Answer · 2016-11-25 15:23:53Z

1

It looks like what you really want is a matrix, and that is not how you produce a matrix in javascript. This is how a three-dimensional matrix is produced:

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

Like this you have a parent array that has a child that is another array (this makes a simple matrix) and then, this child has yet another child array (a grandchild to the parent array), which then becomes a three dimensional array. Take a look at a three dimensional array definition with some 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 case the first digit relates to the parent index, the second digit (after the hyphen) relates to the child index and the third index (after the last hyphen) relates to the grandchild index. So 1-1-1 points to the second parent (0 base index), and to the second child and to the second grandchild.

I have made an example on codepen to illustrate how to handle this.

answered Nov 25, 2016 at 15:23

Bruno

3,1691 gold badge27 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DCH Over a year ago

Thank you! I wasn't aware of the [[[]]]-syntax to create a matrix. I tried the Java-syntax, but that didn't work.

Bruno Over a year ago

No problem @DCH. If this really helped you and is the right answer, you can mark it as so. Have fun.

Collectives™ on Stack Overflow

ng-model with multi-dimensional array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related