Question

在angularjs中，JSON数据应该如何，以及ng-repeat的嵌套应如何获取数据，如图所示？

Answer 1

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>


<body ng-app="myApp" ng-controller="myCtrl">

    <div class="container">

        <table class="table">
            <thead>
                <tr>
                    <th>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Sample</th>
                                    <th>sequence</th>
                                    <th>attribute</th>
                                    <th>MeasureUnit</th>
                                </tr>
                            </thead>
                        </table>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="record in records">
                    <td>
                        <table class="table">
                            <thead>

                            </thead>
                            <tbody>
                                <tr ng-repeat="record in record.data">
                                    <td>{{record.sample}}</td>
                                    <td>{{record.sequence}}</td>
                                    <td>{{record.attribute}}</td>
                                    <td>{{record.MeasureUnit}}</td>
                                </tr>
                                <tr ng-if(record.data.length= =index+1)>
                                    <td><button class="btn btn-danger">Delete Sample {{record.sample}}</button></td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>

        <script>
            var app = angular.module("myApp", []);
            app.controller("myCtrl", function ($scope) {
                $scope.records = [
                  {
                      sample: 1,
                      data: [{ sample: 1, sequence: 1, attribute: 'Height', MeasureUnit: 'centimeter' },
                          { sample: 1, sequence: 2, attribute: 'Height', MeasureUnit: 'centimeter' }, ]
                  },
                  {
                      sample: 2,
                      data: [{ sample: 2, sequence: 1, attribute: 'Height', MeasureUnit: 'centimeter' },
                          { sample: 2, sequence: 2, attribute: 'Height', MeasureUnit: 'centimeter' }, ]
                  },
                ]
            });
        </script>

</body>
</html>

Answer 2

您可以使用groupBy过滤器：

无需嵌套数据，只需添加要分组的列，如下例所示：

$scope.players = [
  {name: 'Gene', team: 'alpha'},
  {name: 'George', team: 'beta'},
  {name: 'Steve', team: 'gamma'},
  {name: 'Paula', team: 'beta'},
  {name: 'Scruath', team: 'gamma'}
];

jsbin

Answer 3

这种JSON格式可能对您有帮助，

    [
    {sample :1, 
        data: [{sample:1,sequence:1,attribute:'Height',MeasureUnit:'centimeter'},
            {sample:1,sequence:2,attribute:'Height',MeasureUnit:'centimeter'},]
    },
    {sample:2,
        data:[{sample:2,sequence:1,attribute:'Height',MeasureUnit:'centimeter'},
            {sample:2,sequence:2,attribute:'Height',MeasureUnit:'centimeter'},]
    },
]

angularjs如何嵌套ng-repeat

3 个答案: