AngularJS在HTML表元素中嵌套ng-repeat(键，值)对数据结构中的ng-repeat(键，值)

Question

我想打印下列数据结构中的表行。

$scope.myData = {}
myData['Item1']['Period1']= {"Value":1} 
myData['Item1']['Period2']= {"Value":2} 
myData['Item1']['Period3']= {"Value":3} 
myData['Item1']['Period4']= {"Value":4} 
myData['Item2']['Period1']= {"Value":11} 
myData['Item2']['Period2']= {"Value":12} 
myData['Item3']['Period3']= {"Value":13} 
myData['Item4']['Period4']= {"Value":14} 

我想像这样打印它并按周期名称DESC:

排序

<tbody >
    <tr ng-repeat="(key, value) in myData">
        <td>
            {{ key }}
        </td>
        <td ng-repeat="PeriodItem in value | <!-- here the filtering -->">
          {{ PeriodItem.Value }}
        </td>
    </tr>
</tbody>

键被打印出来，但是PeriodItem。价值则不然。什么是正确的方法，因为我尝试了一些事情，他们似乎都没有工作。

期望输出示例:

<tbody>
    <tr>
        <td>Item1</td>
        <td>4</td>
        <td>3</td>
        <td>2</td>
        <td>1</td>
    </tr>
    <tr>
        <td>Item2</td>
        <td>14</td>
        <td>13</td>
        <td>12</td>
        <td>11</td>
    </tr>
</tbody>

Answer 1

试试这个

  <tbody >
        <tr ng-repeat="(key, value) in myData">
            <td>
                {{ key }}
            </td>
            <td ng-repeat="(key, value) in value">
              {{ value.Value }}
            </td>
        </tr>
    </tbody>

Answer 2

当使用ng-repeat时，"(key, value) in blah"语法用于迭代哈希值。

"value in blah"用于迭代数组

您已将数据定义为

myData['Item1']['Period1']= {"Value":1}
myData['Item1']['Period2']= {"Value":2} 
...

有点令人困惑。如果对其进行重构，则应该清楚第二次元是数组还是散列。

$scope.myData = {
    Item1: {
              Period1: {Value: 1},
              Period2: {Value: 2},
              Period3: {Value: 3},
              Period4: {Value: 4},
           },
    Item2: {
              Period1: {Value: 11},
              Period2: {Value: 22},
    ...