如何使用ng-repeat显示数组

Posted 2021-04-09

我有一个形式为“的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
----------

我会对此表示感谢。

答案

您可以对数据执行某些操作，并可以使用修改后的结构创建另一个对象，以便它可以与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一起使用的对象。以下行执行create该对象（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 
           });
     });

将进入控制器的Final Code Snippet将是：

    $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或包含任何预定义的样式表来美化表视图。希望有所帮助!!