如何将 JSON 对象映射到 ng-repeat 中的折叠行

How to map JSON object to collapsed rows in ng-repeat

本文关键字:ng-repeat 折叠 映射 JSON 对象      更新时间:2023-09-26

我有一个来自数据库的JSON对象作为一个大对象,例如:

 $scope.totalsum =
      {
           "A1": 1155000,
           "A2": null,
           "A3": 2133,
           "A31": 29292,
           "A32": 2321,
           "A33": 232342,
           etc....
      },

我需要 A31 和 A32 等来填充折叠的表数据行。这是到目前为止对象的 ng-repeat:

 <tr ng-repeat-start="data in totalsum" ng-click="isRowCollapsed=!isRowCollapsed">
      <td>
           <input class="form-control" placeholder="{{data.total | number:2}}">
      </td>
 </tr>
 <tr ng-repeat-end ng-show="data.breakdown.length>0" ng-hide="isRowCollapsed">
      <td ng-show="data.breakdown.length>0">
           <div class="subvalues" ng-repeat="subvalues in data.breakdown">
                <input class="form-control" placeholder="{{subvalues.subtotal | number:2}}">
           </div>
      </td>
 </tr>
 <tr>
      <td>
           <input class="form-control" placeholder="{{getTotal('total') | number:2}}">
      </td>
 </tr> 

我最初让 ng-repeat 适用于这样的 JSON 对象:

 $scope.totalsum = [
                     {
                          "total": 1155000,
                          "breakdown": null
                      },
                      {
                          "total": 233235000,
                          "breakdown": [
                              {
                                  "subtotal": 22002020
                              },
                              {
                                  "subtotal": 22002020
                              }
                          ]
                      },

我所知,您可以使用ng-repeat与(键,值)选项来解决此问题:

<tr ng-repeat="(key, value) in totalsum">
     <td> {{key}} </td> <td> {{ value }} </td>
</tr>