AngularJS使用排序过滤器在HTML表元素中的ng-repeat(键,值)对数据结构中嵌套ng-repat

时间:2021-07-14 07:41:30

I want to print table rows from the fallowing data structure.

我想从休眠数据结构中打印表行。

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

I want to print it somehow like this and sort by Period name DESC:

我想以某种方式打印它,并按句点名称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>

The key is printed out, but the PeriodItem.Value is not. What is the proper way to do that, because i tried a couple of things and none of them seem to work.

键是打印出来的,但PeriodItem.Value不是。这样做的正确方法是什么,因为我尝试了几件事,但似乎都没有。

Example of desired output:

期望输出的示例:

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

2 个解决方案

#1


1  

try this fiddle

试试这个小提琴

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

#2


1  

when using ng-repeat, "(key, value) in blah" syntax is used to iterate hashes.

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

"value in blah" is used to iterate arrays

“blah中的值”用于迭代数组

You've defined your data as

您已将数据定义为

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

which is a bit confusing. If you restructure it, it should be clear whether the second dimension is an array or hash.

这有点令人困惑。如果重构它,应该清楚第二个维度是数组还是哈希。

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

#1


1  

try this fiddle

试试这个小提琴

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

#2


1  

when using ng-repeat, "(key, value) in blah" syntax is used to iterate hashes.

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

"value in blah" is used to iterate arrays

“blah中的值”用于迭代数组

You've defined your data as

您已将数据定义为

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

which is a bit confusing. If you restructure it, it should be clear whether the second dimension is an array or hash.

这有点令人困惑。如果重构它,应该清楚第二个维度是数组还是哈希。

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