Question

我正在使用AngularJS在表格上显示一些数据，因为我正在使用ng-repeat来获取一个对象并在表格单元格中显示它的属性值

对象结构如下：

{
  ...
  ...
  "containerKey" : {
        "parentKey" : {
           "childKey1" : "value",
           "childKey2" : "value",
           "childKey3" : "value
        }
  }
}

ng-repeat显示表

<table ng-repeat="key in containerKey">
   <tr>
    <!-- This should display the value of the key (in my case it is the name of a day in the week, but it displayed the entire object inside key.parentKey, which is expected -->
    <th id="day">{{ key.parentKey }}</th> <!-- I would like for this to show the value of the key, in my case that would be the name of the day, like "monday" -->

   </tr>
   <tr>
     <td>{{ parentKey.childKey1 }}</td>
   </tr>
   <tr>
     <td>{{ parentKey.childKey2 }}</td>
   </tr>
   <tr>
     <td>{{ parentKey.childKey3 }}</td>
  </tr>
</table>

如何仅在表格单元格中显示parentKey的键值？考虑我使用ng-repeat来显示多行，每行包含ng-repeat，其中包含日期（parentKey）。

澄清：

我希望带有<th>的{{1}}元素显示id="day"密钥的文本。 parentKey元素的内容将是th（字符串parentKey），而不是parentKey的值。

Answer 1

您是否尝试更改ng-repeat以使用对象表示法：

<table ng-repeat="(key, value) in containerKey">

您应该可以访问密钥。

Answer 2

首先，在您的代码中，您尝试在对象上使用ng-repeat。 ng-repeat应该迭代数组。

考虑containerKey是parentKey的数组，这可能有效：

<table>
    <tbody ng-repeat="(key, value) in containerKey">
        <th>{{key}}</th>
        <tr>{{value.childKey1}}</tr>
        <tr>{{value.childKey2}}</tr>
        <tr>{{value.childKey3}}</tr>
    </tbody>
</table>

对象父键JavaScript

2 个答案: