如何使用angularjs动态加载html表中的嵌套数组属性？答案

【问题标题】：How to dynamically load the nested array attributes in html table using angularjs?如何使用angularjs动态加载html表中的嵌套数组属性？
【发布时间】：2020-04-17 08:49:48
【问题描述】：

这是我尝试过的代码，但只有 cardno 和 cardtype 的值，为什么我无法访问其余的值？有什么建议吗？

<tr ng-repeat="data in myData17.layouts">
  <td ng-show="$index==1">{{data.name}}</td>
  <td ng-show="$index==1">
    <table>
      <tr ng-repeat="card in data.cards">
        <td>{{card.cardNo}}</td>
      </tr>
    </table>
  </td>
  <td ng-show="$index==1">
    <table>
      <tr ng-repeat="card in data.cards">
        <td>{{card.cardType}}</td>
      </tr>
    </table>
  </td>
  <td ng-show="$index==1">
    <table>
      <tr ng-repeat="card in data.cards.ports">
        <td>{{card.portNo}}</td>
      </tr>
    </table>
  </td>
  <td ng-show="$index==1">
    <table>
      <tr ng-repeat="card in data.cards.ports">
        <td>{{card.portName}}</td>
      </tr>
    </table>
  </td>
  <td ng-show="$index==1">
    <table>
      <tr ng-repeat="card in data.cards.ports">
        <td>{{card.portType}}</td>
      </tr>
    </table>
  </td>
  <td ng-show="$index==1">
    <table>
      <tr ng-repeat="card in data.cards.ports">
        <td>{{card.portspeed}}</td>
      </tr>
    </table>
  </td>
  <td ng-show="$index==1">
    <table>
      <tr ng-repeat="card in data.cards.ports">
        <td>{{card["ds-scheduler-node-profile"]}}</td>
      </tr>
    </table>
  </td>
</tr>

这是我的数据。

      {
  "name": "twoCardOneEthportAndOne10G",
  "cards": [{
    "cardNo": "1",
    "cardType": "Ethernet",
    "ports": [{
      "portNo": "1",
      "portName": "LAN1",
      "portType": "ethernetCsmacd",
      "portspeed": "eth-if-speed-1gb",
      "ds-scheduler-node-profile": "default"
    }]
  },
    {
      "cardNo": "10",
      "cardType": "Ethernet",
      "ports": [{
        "portNo": "1",
        "portName": "10GE",
        "portType": "ethernetCsmacd",
        "portspeed": "eth-if-speed-10gb",
        "ds-scheduler-node-profile": "default"
      }]
    }]
}

【问题讨论】：

请查看此解决方案link

标签： javascript html angularjs angularjs-ng-repeat dynamic-tables

【解决方案1】：

data.cards.ports 不是一个东西。

ports 属性属于单数 card，cards 是一个数组。

必须像这样访问它：

data.cards[0].ports

那么，这将如何在您的代码中构建？您将需要这样的东西（这不是您确切实施的解决方案，只是帮助您以所需方式访问数据的视觉指南）

<div ng-repeat=“data in myData17.layouts”>
    {{ data.name }}
    <div ng-repeat=“card in data.cards”>
        {{ card.cardNo }}
        <div ng-repeat=“port in card.ports”>
            {{ port.portNo }}
        </div>
    </div>
</div>

希望这能给你一个更好的理解和好运

【讨论】：