javascript - Angularjs - `ng-model` in multi-dimension array -
i have object
:
[{ 'name': '2015', 'section': '001', 'subsections': [{ subsection:'aa', mainelements: ['cc','dd'] },{ subsection:'bb', mainelements: ['ee','ff'] }] }]
and 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 problem is, need ng-model
dynamic can edit them separately. in case, audit.name
, audit.section
dynamic. subsection.subsection
, main element
not.
when 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 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
ng-model
dynamic? - how access
mainelement
object inkey-value
form?
update:
i managed elements 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 issue ng-model="mainelements"
@ 5th last line not unique. there way have second index $index02
or other alternative ways this?
so have array of subsections , within array of mainelements.
as such need access each item valid index. hence console.log(editaudit.subsections.mainelements);
logs out undefined
. change console.log(editaudit.subsections[index].mainelements);
and in view can access array items index within ng-repeat
. use audit.subsections[$index].subsection
instead of subsection.subsection
, mainelements[$index]
instead of mainelement
bind model. not sure mean "get ng-model
dynamic" hope gets going.
Comments
Post a Comment