我有这个对象和数组:
"{
"Drivers":[
{
"Id":"41ba341a-e50f-4878-b55e-6c96ef5027b0",
"FirstName":"John",
"LastName":"David",
"MiddleName":"Smity",
"Party":{
"Id":"12rtb67-fa45-4e77-998c-123fgyh764",
"Name":"The Smith Family",
"CustomerId":"01d84752-ad12-4dfa-af63-65d12052a161"
}
},
{
"Id":"f37ff0c7-294d-43d1-a790-11af1f6f3e91",
"FirstName":"John",
"LastName":"Smith",
"MiddleName":"David",
"Party":{
"Id":"f2a82558-fa45-4e77-998c-29160f30f9f6",
"Name":"The Smith Family",
"CustomerId":"01d84752-ad12-4dfa-af63-65d12052a161"
}
}
]
}"
我想遍历Drivers对象,并在angularjs foreach中显示值。
这是我正在尝试的:
<table data-ng-controller="DriverController">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody data-ng-repeat="driver in Drivers.Drivers">
<tr>
<td>{{driver.FirstName}}</td>
</tr>
</tbody>
</table>
没有帮助。
我也尝试过:
<table data-ng-controller="DriverController">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody data-ng-repeat="driver in Drivers">
<tr>
<td>{{driver.FirstName}}</td>
</tr>
</tbody>
</table>
但是我得到了相同的结果,屏幕上没有显示数据。
我如何在示例中尝试遍历数组的属性并在表中显示结果?
您的JSON是示例中的字符串。如果那是您从服务器接收它的方式,则需要对其进行解析。除此以外,您的代码可在此插件中使用:http://plnkr.co/edit/x2IJRCUUTqpYnombadzn?p=preview
<table data-ng-controller="DriverController">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody data-ng-repeat="driver in drivers.Drivers">
<tr>
<td>{{driver.FirstName}}</td>
</tr>
</tbody>
</table>
$scope.drivers = {
"Drivers":[
{
"Id":"41ba341a-e50f-4878-b55e-6c96ef5027b0",
"FirstName":"John",
"LastName":"David",
"MiddleName":"Smity",
"Party":{
"Id":"12rtb67-fa45-4e77-998c-123fgyh764",
"Name":"The Smith Family",
"CustomerId":"01d84752-ad12-4dfa-af63-65d12052a161"
}
},
{
"Id":"f37ff0c7-294d-43d1-a790-11af1f6f3e91",
"FirstName":"John",
"LastName":"Smith",
"MiddleName":"David",
"Party":{
"Id":"f2a82558-fa45-4e77-998c-29160f30f9f6",
"Name":"The Smith Family",
"CustomerId":"01d84752-ad12-4dfa-af63-65d12052a161"
}
}
]
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('MyCtrl', function ($scope) {
$scope.Drivers =
[
{
"Id": "41ba341a-e50f-4878-b55e-6c96ef5027b0",
"FirstName": "John",
"LastName": "David",
"MiddleName": "Smity",
"Party": {
"Id": "12rtb67-fa45-4e77-998c-123fgyh764",
"Name": "The Smith Family",
"CustomerId": "01d84752-ad12-4dfa-af63-65d12052a161"
}
},
{
"Id": "f37ff0c7-294d-43d1-a790-11af1f6f3e91",
"FirstName": "John",
"LastName": "Smith",
"MiddleName": "David",
"Party": {
"Id": "f2a82558-fa45-4e77-998c-29160f30f9f6",
"Name": "The Smith Family",
"CustomerId": "01d84752-ad12-4dfa-af63-65d12052a161"
}
}
];
});
</script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<table>
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody data-ng-repeat="driver in Drivers">
<tr>
<td>{{driver.FirstName}}</td>
</tr>
</tbody>
</table>
</body>
</html>