如何在AngularJS模板中迭代内部对象的属性？

我正在学习AngularJS.我想打印出一个对象列表,并迭代一个对象的内部对象的属性.这看起来像是使用嵌套循环的标准过程,但是,它看起来并不那么简单.

我的控制器设置如下.从本质上讲,它是一个随机车辆列表.

var vehicleApp = angular.module("vehicleApp",[]);

vehicleApp.controller('VehicleController',function ($scope) {
    $scope.vehicles = [{
        id: 0,name: "car",parts: {
            wheels: 4,doors: 4
        }
    },{
        id: 1,name: "plane",parts: {
            wings: 2,doors: 2
        }
    },{
        id: 2,name: "boat",parts: {
            doors: 1
        }
    }];
});

我想输出这样的车辆：

car
 - wheels (4)
 - doors (2)

plane
 - wings (2)
 - doors (2)

boat
 - doors (1)

我使用的模板是这样设置的：

<div ng-app="vehicleApp" ng-controller="VehicleController">
    <p ng-repeat="vehicle in vehicles">
        {{ vehicle.name }}
    </p>
    <ul>
        <li ng-repeat="(attribute,value) in vehicle.parts">
            {{attribute}} ({{value}})
        </li>
    </ul>
</div>

这将生成车辆列表,但不会生成零件内部对象的子列表.

有趣的是,当我使用{{vehicle.parts}}时,它会返回部件内部对象的JSON字符串. AngularJS是否将其视为字符串,因此无法打印出部件对象的属性？

解决方法

你没有在第一个中包含第二个ngRepeat：

<div ng-app="vehicleApp" ng-controller="VehicleController">
    <p ng-repeat="vehicle in vehicles">
        {{ vehicle.name }}
        <ul>
            <li ng-repeat="(attribute,value) in vehicle.parts">
                {{attribute}} ({{value}})
            </li>
        </ul>
    </p>
</div>