有哪些方法可以以非表格格式显示Angular中的JSON数据

What are some ways to display JSON data in Angular in a non-tabular format?

本文关键字：显示 Angular 中的 数据 JSON 格式 方法 表格      更新时间：2023-09-26

我正在编写的一个web应用程序遇到了一些困难，非常感谢那些比我更有Angular经验的人向正确的方向推动我。

以下是关于我面临的问题的一些一般信息：

我在控制器的$scope中有JSON数据。它遵循以下结构：

$scope.machines = [
{Name:"foo",type:"bar",onlineDt:"1"},
{Name:"fooda",type:"barda",onlineDt:"1"},
{Name:"fooda",type:"barda",onlineDt:"1"}]

在我的index.html页面上，我想要为$scope.data数组中的每个对象创建一个tile（使用div和css创建tile的外观）。我希望每行显示8个对象。我想用ngRepeat来显示对象，所以我做了以下测试：

我创建了一个方法，用8行填充2D阵列。经过测试，效果很好。

    $scope.grid = [];
    function assignMachinesToGrid() {
        $scope.grid = [];
        var arr = [];
        for (var i = 0; i < $scope.machines.length; i++) {
            if (arr.length < 9) {
                arr.push($scope.machines[i]);
            } else {
                $scope.grid.push(arr);
                arr = [];
            }
        }
        if (arr.length > 0) {
            $scope.grid.push(arr);
        }
    }

然后，在我看来，我做了以下事情。

<div class="row">
    <div class="col-md-3">
        <div ng-repeat="row in $scope.grid">
            <div ng-repeat="tile in row">{{tile.Name}}</div>
        </div>
    </div>
</div>

虽然没用，但这是我能想出的最好的办法。欢迎就显示这些信息的正确方式提出任何建议。我应该使用二维数组吗？你在重复我想要的吗？

您必须在<div ng-repeat="row in $scope.grid">中去掉$scope.。事实上，如果你尝试这样做，它应该会在你的控制台中记录一个错误。

<div ng-repeat="row in grid">将是正确的方法。

按照Alrazah的建议使用ng repeat，我也会将其保留在一个数组中，并使用css创建网格，将其宽度设置为12.5%并浮动：例如left。处理一维比二维更容易遵循逻辑。

相关文章：