Angularjs - ' ng-model '在多维数组中

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

本文关键字：数组 ng-model Angularjs      更新时间：2023-09-26

我有这个object:

[{
  'name': '2015',
  'section': '001',
  'subsections': [{
    subsection:'aa',
    mainelements: ['cc','dd']
    },{
    subsection:'bb',
    mainelements: ['ee','ff']
    }]
}]
我可以在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>

但问题是，我需要所有的ng-model是动态的，这样我就可以单独编辑它们。在本例中，只有audit.name和audit.section是动态的。但subsection.subsection和main element不是。

当我这样做时:

$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);
    }

得到这个

[Log] 2015
[Log] market map
[Log] [{subsection: "aa", mainelements: ["cc", "dd"], $$hashKey: "object:9"}, {subsection: "bb", mainelements: ["ee", "ff"], $$hashKey: "object:10"}]
[Log] undefined
  1. 我可以得到所有的ng-model是动态的吗?
  2. 如何访问mainelement，这是Key-value形式的对象?
更新:

我设法让我所有的元素显示:

<!--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>

但是现在的问题是ng-model="mainelements"在最后的第5行不是唯一的。是否有像$index02这样的第二个索引或其他替代方法来做到这一点?

这样你就有了一个子元素数组和另一个主元素数组。

因此，您需要使用有效索引访问每个项。因此，您的console.log(editaudit.subsections.mainelements);注销undefined。改成console.log(editaudit.subsections[index].mainelements);

在您的视图中，您还可以通过ng-repeat中的索引访问数组项。简单地使用audit.subsections[$index].subsection代替subsection.subsection和mainelements[$index]代替mainelement来绑定到您的模型。我不确定你所说的"让所有ng-model动态"是什么意思，但我希望这能让你继续下去。

相关文章：