Question

我正在尝试使用ng-repeat以html形式显示json数据，我能够抓取数据，但是有些由于对象结构中的对象而无法实现。例如：“ Obj => Obj => Obj”。

在下面的json对象中，我已经访问了“颜色”中的obj，但是需要帮助的地方是访问“座位”和“引擎”中的obj！我认为，只要使用ng-repeat捕获“ seat” objs，它都可能会对“ engine”起到相同作用。

我确实是这样的：ng-repeat = "c in datasource"的第一步。接下来在td中，我做了ng-repeat =" allcolor in c.Color"以获取该“颜色”的数据。

现在在另一个td中，我想在“座位”中获取objs的数据，我该如何处理？

例如：ng-repeat = "seatobjs in allcolor.seat"不起作用。

<tr ng-repeat = "c in datasource">
<td>{{c.Name}}</td>
<td>{{c.From}}</td>
<td ><p ng-repeat="allcolor in c.Color> 
     {{allcolor.Name}}</p></td>
<td><p ng-repeat="seatobjs in allcolor.seat"> //need help here
     {{seatobjs.Name}}</p></td>
<td><button type="button" ng-disabled="!(check)">Edit</button></td>
</tr>

谢谢

[ 
   { 
    "Name": "Car",
    "From": "2019-06-26", 
    "Tom": "2019-12-31",
    "Color": [ 
        { 
            "Name": "Green",             
            "From": "2019-06-26",  
            "Tom": "2019-12-31",
            "seat": [ 
              { 
                "Name": "Yello",                  
                "From": "2019-06-26", 
                "Tom": "2019-12-31"
              },
              { 
                "Name": "Green",              
                "From": "2019-06-26", 
                "Tom": "2019-12-31"
              }
            ],
            "engine": [     
              { 
                "Name": "Brown",                 
                "From": "2019-06-26", 
                "Tom": "2019-12-31"
              }
            ]
        }
    ]
   },
   { 
    "Name": "Car",
    "From": "2019-06-26", 
    "Tom": "2019-12-31",
    "Color": [     
        { 
            "Name": "Red",             
            "From": "2019-06-26", 
            "Tom": "2019-12-31",
            "tyre": [       
              { 
                "Name": "Yello",                  
                "From": "2019-06-26", 
                "Tom": "2019-12-31"
              },
              { 
                "Name": "Green",              
                "From": "2019-06-26", 
                "Tom": "2019-12-31"
              }
            ],
            "engine": [ 
              { 
                "Name": "Black",                 
                "From": "2019-06-26", 
                "Tom": "2019-12-31"
              }
            ]
        }
    ]
   },
]

Answer 1

尝试

ng-repeat = "seatobjs in allcolor['seat']"

Answer 2

使用ngRepeat指令，可以遍历对象的属性。这是语法：

<div ng-repeat="(key, value) in myObj">…</div>

以下代码迭代JSON的某些属性并将其绑定到表中：

var carApp = angular.module('carApp', []);
carApp.controller('CarController', function CarController($scope) {
  $scope.cars = [{
      "Name": "Car",
      "From": "2019-06-26",
      "Tom": "2019-12-31",
      "Color": [{
        "Name": "Green",
        "From": "2019-06-26",
        "Tom": "2019-12-31",
        "seat": [{
            "Name": "Yello",
            "From": "2019-06-26",
            "Tom": "2019-12-31"
          },
          {
            "Name": "Green",
            "From": "2019-06-26",
            "Tom": "2019-12-31"
          }
        ],
        "engine": [{
          "Name": "Brown",
          "From": "2019-06-26",
          "Tom": "2019-12-31"
        }]
      }]
    },
    {
      "Name": "Car",
      "From": "2019-06-26",
      "Tom": "2019-12-31",
      "Color": [{
        "Name": "Red",
        "From": "2019-06-26",
        "Tom": "2019-12-31",
        "tyre": [{
            "Name": "Yello",
            "From": "2019-06-26",
            "Tom": "2019-12-31"
          },
          {
            "Name": "Green",
            "From": "2019-06-26",
            "Tom": "2019-12-31"
          }
        ],
        "engine": [{
          "Name": "Black",
          "From": "2019-06-26",
          "Tom": "2019-12-31"
        }]
      }]
    },
  ];
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="carApp">
  <div ng-controller="CarController">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Name</th>
          <th>Color</th>
          <th>Seat</th>
          <th>Tyre</th>
          <th>Engine</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="car in cars">
          <td>{{car.Name}}</td>
          <td>
            <span>{{car.Color[0].Name}}</span>
          </td>
          <td>
            <ul>
              <li ng-repeat="seat in car.Color[0].seat">{{seat.Name}}</li>
            </ul>
          </td>
          <td>
            <ul>
              <li ng-repeat="tyre in car.Color[0].tyre">{{tyre.Name}}</li>
            </ul>
          </td>
          <td>{{car.Color[0].engine[0].Name}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 3

allcolor不能被ng-repeat定义的元素之外的元素访问。使用给定的HTML标记，您可能要在新的td和access位上再次使用ng-repeat，如下所示。

<tr ng-repeat = "c in datasource">
    <td>{{c.Name}}</td>
    <td>{{c.From}}</td>
    <td ><p ng-repeat="allcolor in c.Color> 
        {{allcolor.Name}}</p>
    </td>
    <td ng-repeat =" allcolor2 in c.Color">
        <p ng-repeat="seatobjs in allcolor2.seat">{{seatobjs.Name}}</p>
    </td>
    <td><button type="button" ng-disabled="!(check)">Edit</button></td>
</tr>

在angularjs中访问复杂的json数据

3 个答案: