Angularjs - `ng-model` in multi-dimension array

Question

I have this object:

[{
  'name': '2015',
  'section': '001',
  'subsections': [{
    subsection:'aa',
    mainelements: ['cc','dd']
    },{
    subsection:'bb',
    mainelements: ['ee','ff']
    }]
}]

and I can display them in html

  <body>
    <button ng-click="new()">New</button>
    <ul>
        <li ng-repeat="audit in audits">
          <span ng-hide="editing"><h5>{{audit.name}}</h5></span></br>
          <input ng-show="editing" type="text" ng-model="audit.name"  size="30" placeholder="add name here"></br>
          <span ng-hide="editing">{{audit.section}}</span></br>
          <input ng-show="editing" type="text" ng-model="audit.section"  size="30" placeholder="add section here"></br>
          <ul>
              <li ng-repeat="subsection in audit.subsections">
                  <span ng-hide="editing">{{subsection.subsection}}</span></br>
                  <input ng-show="editing" type="text" ng-model="subsection.subsection"  size="30" placeholder="add subsection here"></br>
                  <ul>
                        <li ng-repeat="mainelement in subsection.mainelements">
                          <span ng-hide="editing">{{mainelement}}</span></br>
                            <input ng-show="editing" type="text" ng-model="mainelement"  size="30" placeholder="add mainelement here"></br>
                        </li>
                  </ul>
              </li>
          </ul>
          <div id="buttons">
            <button type="button" ng-hide="editing" ng-click="editing = true">Edit</button>
            <button type="button" ng-show="editing" ng-click="editing = false">Save</button>
          </div>
        </li>
      </ul>
  </body>

But the problem is, I need all ng-model to be dynamic so that I can edit them separately. In this case, only audit.name and audit.section is dynamic. But subsection.subsection and main element are not.

When I do this:

$scope.logging = function(i) {
        var editaudit = $scope.audits[i];
        console.log(editaudit.name);
        console.log(editaudit.section);
        console.log(editaudit.subsections);
        console.log(editaudit.subsections.mainelements);
    }

and get this

[Log] 2015
[Log] market map
[Log] [{subsection: "aa", mainelements: ["cc", "dd"], $$hashKey: "object:9"}, {subsection: "bb", mainelements: ["ee", "ff"], $$hashKey: "object:10"}]
[Log] undefined

I can I get all ng-model to be dynamic?
How to access to mainelement which is an object in Key-value form?

Update:

I managed to get all my elements to show up:

<!--Html -->
<ul>
              <li class="bitcard" ng-repeat="subsection in audit.subsections">
                  <span ng-hide="editing">{{audit.subsections[$index].subsection}}</span></br>
                  <input ng-show="editing" type="text" ng-model="audit.subsections[$index].subsection"  size="30" placeholder="add subsection here"></br>
                  <ul>
                        <li class="bitcard" ng-repeat="mainelements in audit.subsections[$index].mainelements">
                          <span ng-hide="editing">{{mainelements}}</span></br>
                            <input ng-show="editing" type="text" ng-model="mainelements"  size="30" placeholder="add mainelement here"></br>
                        </li>
                  </ul>
              </li>
          </ul>

But now the issue is ng-model="mainelements" at the 5th last line is not unique. Is there a way to have second index like $index02 or other alternative ways to do this?

I don't get it when you say all to be dynamic. please be more specific. about accessing mainelement, you could use ng-model="mainelement[0]" and ng-model="mainelement[1]" if want to access each of the members. — Farzad Yousefzadeh
– Farzad Yousefzadeh, Commented Oct 15, 2015 at 7:49
Also note that using that much of ngShow and ngHide directives alongside 3ngRepeats is seriously breaking the angular app performance. — Farzad Yousefzadeh
– Farzad Yousefzadeh, Commented Oct 15, 2015 at 7:50
@FarzadYZ Please take a look at the plunker and click on edit . It will be nice if you can suggest something more optimum. — sooon
– sooon, Commented Oct 15, 2015 at 8:24

André Kreienbring · Accepted Answer · 2015-10-15 07:59:25Z

2

So you have an array of subsections and within that another array of mainelements.

As such you need to access each item with a valid index. Hence your console.log(editaudit.subsections.mainelements); logs out undefined. Change it to console.log(editaudit.subsections[index].mainelements);

And in your view you can also access array items by index within the ng-repeat. Simply use audit.subsections[$index].subsection instead of subsection.subsection and mainelements[$index] instead of mainelement to bind to your model. Not sure what your mean by "get all ng-model to by dynamic" but I hope this gets you going.

answered Oct 15, 2015 at 7:59

André Kreienbring

2,50915 silver badges16 bronze badges

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

1 Comment

André Kreienbring Over a year ago

You can still use mainelements[$index] as $index always refers to the current loop you are in. Read more about it here. And please accept this answer if it is correct (to help others)

Collectives™ on Stack Overflow

Angularjs - `ng-model` in multi-dimension array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related