如何迭代 AngularJS 中的地图以填充 table 数据

Question

{
unit1: {
trng1: {
totalCount: 16,
passCount: 1
},
trng2: {
totalCount: 12,
passCount: 0
}
},
unit2: {
trng1: {
totalCount: 12,
passCount: 11
},
trng2: {
totalCount: 6,
passCount: 0
}  
}

以上是我从后端调用中得到的 json 响应。

我需要如下输出

我需要下面的 table 格式：

单位 trng1 trng2

unit1 16 和 1 - 12 和 0

unti2 12 和 11 - 6 和 0

Answer 1

you can do it like this

 var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.data = {
                  unit1: {
                          trng1: {
                          totalCount: 16,
                          passCount: 1
                         },
                          trng2: {
                          totalCount: 12,
                          passCount: 0 
                          }
                        },
                  unit2: {
                        trng1: {
                        totalCount: 12,
                        passCount: 11
                        },
                        trng2: {
                        totalCount: 6,
                        passCount: 0
                        }  
                      }
          }     });

<!DOCTYPE html>
<html ng-app="angularjs-starter">
  
  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>


  </head>
  
  <body ng-controller="MainCtrl">
     <table>
      <tr><th>units</th><th>trng1</th><th>trng2</th></tr>
      <tr ng-repeat="(key, val) in data"><td>{{key}}</td><td>{{val.trng1.totalCount}} and {{val.trng1.passCount}}</td></td><td>{{val.trng1.totalCount}} and {{val.trng2.passCount}}</td></tr>
    </table>
  </body>

</html>

如何迭代 AngularJS 中的地图以填充 table 数据

How to iterate map of maps in AngularJS to populate table data

angularjs

angularjs-ng-repeat