Question

我有以下形式的json数组：

{ 
  "School1":  [{"name": "john", "age":"28"},
              {"name": "paul", "age":"27"}],
  "School2":  [{"name": "david", "age":"27"},
               {"name": "sil", "age":"28"}] 
}

如何使用Angular中的ng-repeat以这种形式在表格中显示：

----------
Name |  Age
----------
School1            
----------
john | 28
----------
paul | 2
----------
School2
----------
david| 27
----------
sil| 28
----------

我将对此有所帮助。

Answer 1

您可以对数据执行一些操作，还可以使用修改后的结构创建另一个对象，以便它可以与ng-repeat一起使用，以所需的形式显示表。

您可以通过一个示例更好地理解这一点。

这是您要在表格视图中显示的数据

 $scope.testData = { 
      "School1":  [{"name": "john", "age":"28"},
                  {"name": "paul", "age":"27"}],
      "School2":  [{"name": "david", "age":"27"},
                   {"name": "sil", "age":"28"}] 
    }

我们对“ testData”执行一个操作，以标识此JSON对象中的键“ School1”和“ School2”。下一行执行该操作。

$scope.keys = Object.keys($scope.testData);

$ scope.keys将是一个键数组：["School1",School2"];

然后，您可以遍历键的数组并创建另一个可以与HTML代码中的ng-repeat一起使用的对象。执行以下代码创建该对象（tableData）：

$scope.tableData=[];
    //Iterating on array of keys
    $scope.keys.forEach(element => {
           $scope.tableData.push({
                 column : element,
                 data : $scope.testData[element]  //Getting your data from testData 
           });
     });

将在控制器中使用的最终代码段为：

    $scope.testData = { 
        "School1":  [{"name": "john", "age":"28"},
                    {"name": "paul", "age":"27"}],
        "School2":  [{"name": "david", "age":"27"},
                     {"name": "sil", "age":"28"}] 
    }

    $scope.keys = Object.keys($scope.testData);   

    $scope.tableData=[];
    $scope.keys.forEach(element => {
        $scope.tableData.push({
            column : element,
            data : $scope.testData[element]
        });
    });

您的HTML代码将如下所示：

<table>
    <tr>
        <th>Name |</th>
        <th>Age</th>
    </tr>
</table>
<table ng-repeat="table in tableData">
    <tr>
        <th>{{table.column}}</th>
    </tr>
    <tr ng-repeat="row in table.data">
        <td>{{row.name}} | </td>
        <td>{{row.age}}</td>
    </tr>
</table>

您绝对可以通过编写自己的CSS或包括任何预定义的样式表来美化表视图。希望对您有帮助！

如何使用ng-repeat显示数组

1 个答案: