如何在AngularJS模板中迭代内部对象的属性?
发布时间:2020-12-17 06:54:20 所属栏目:安全 来源:网络整理
导读:我正在学习AngularJS.我想打印出一个对象列表,并迭代一个对象的内部对象的属性.这看起来像是使用嵌套循环的标准过程,但是,它看起来并不那么简单. 我的控制器设置如下.从本质上讲,它是一个随机车辆列表. var vehicleApp = angular.module("vehicleApp",[]);ve
我正在学习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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |