这是我的html，它会根据$ http.get服务获得每个响应的配置文件。
<div class="container" ng-controller="profileController" ng-init="loadProfilesData()">
<div ng-repeat="p in profileData">
<div>{{p.company}}</div>
<div>{{p.country}}</div>
<div gauge-chart class="gauge" id="first-{{p.Id}}" value=p.value*100 min=0 max=100 gauge-width-scale=0.8 title=""
donut=false relative-gauge-size=true symbol='%' hide-min-max=true></div>
<div gauge-chart class="gauge" id="second-{{p.Id}}" value=p.value*100 min=0 max=100 gauge-width-scale=0.8 title=""
donut=false relative-gauge-size=true symbol='%' hide-min-max=true></div>
<span>
{{ p.value | date: "hh:mm:ss" }}
</span>
</div>
</div>
我得到的回应如下
{
ID: "1",
employeeList: {
[{"Value":0.003,"Stat":{"parameter":0,"Name":"test0","Tag":"Devo100"}},
{"Value":0.004,"Stat":{"parameter":0,"Name":"test1","Tag":"Devo101"},
{"Value":0.005,"Stat":{"parameter":0,"Name":"test2","Tag":"Devo102"}]
},
comapny: "MSDFT",
department: "Sales",
country: "USA"
},
{
ID: "2",
employeeList: null,
comapny: "MSDFT",
department: "Sales",
country: "USA"
},
{
ID: "3",
employeeList: [{"Value":0.003,"Stat":{"parameter":0,"Name":"test0","Tag":"Devo100"}},
{"Value":0.004,"Stat":{"parameter":0,"Name":"test1","Tag":"Devo101"}],
comapny: "MSDFT",
department: "Sales",
country: "USA"
}
因为我获取名称，值的内部列表，有时我得到这个列表employeeList为空。我是否需要为employeeList提供另一个ng-repeat。请建议我如何绑定，因为订购也是随机的。
答案 0 :(得分：1)
由于 employeeList 是一个对象，因此您无需再进行其他ng-repeat。
您可以像
一样访问它<div>
<span>{{p.employeeList.Name }}</span>
<span>{{p.employeeList.Age}}</span>
<span>{{p.employeeList.hireDate}}</span>
</div>
var myApp = angular.module('myApp', [])
myApp.controller('profileController', function ($scope) {
$scope.profilesData = [{
ID: "1",
employeeList: {
Name: "harry",
Age: "20",
hireDate: 236558.189280
},
comapny: "MSDFT",
department: "Sales",
country: "USA"
},
{
ID: "2",
employeeList: null,
comapny: "MSDFT",
department: "Sales",
country: "USA"
},
{
ID: "3",
employeeList: {
hireDate: "",
Name: "marry",
Age: ""
},
comapny: "MSDFT",
department: "Sales",
country: "USA"
}
];
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app='myApp'>
<div class="container" ng-controller="profileController">
<div ng-repeat="p in profilesData">
<span>{{ p.ID }}</span>
<div>
<div>{{p.Name}}</div>
<div>{{p.Age}}</div>
</div>
<hr />
<div>
<span>
{{ p.hireDate | date: "hh:mm:ss" }}</span>
</div>
<hr />
<div>
<span>Company</span>
<span>Department</span>
<span>Country</span>
</div>
<div>
<span>{{p.company }}</span>
<span>{{p.department}}</span>
<span>{{p.country}}</span>
</div>
<div ng-if="p.employeeList">
<span>{{p.employeeList.Name }}</span>
<span>{{p.employeeList.Age}}</span>
<span>{{p.employeeList.hireDate}}</span>
</div>
</div>
</div>
</div>
答案 1 :(得分：0)
使用ng-if检查属性是否为空
<div ng-if="p.employeeList">
<span>{{p.employeeList.Name }}</span>
<span>{{p.employeeList.Age}}</span>
<span>{{p.employeeList.hireDate | date: "hh:mm:ss"}} </span>
</div>
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.profilesData = [ {
ID: "1",
employeeList: {
Name: "harry",
Age: "20",
hireDate: 236558.189280
},
comapny: "MSDFT",
department: "Sales",
country: "USA"
},
{
ID: "2",
employeeList: null,
comapny: "MSDFT",
department: "Sales",
country: "USA"
},
{
ID: "3",
employeeList: {
hireDate: "",
Name: "marry",
Age: ""
},
comapny: "MSDFT",
department: "Sales",
country: "USA"
}]
})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div ng-repeat="p in profilesData">
<span>{{ p.ID }}</span>
<div>
<div>{{p.Name}}</div>
<div>{{p.Age}}</div>
</div>
<hr />
<div>
<span>
{{ p.hireDate | date: "hh:mm:ss" }}</span>
</div>
<hr />
<div>
<span>Company</span>
<span>Department</span>
<span>Country</span>
</div>
<div>
<span>{{p.comapny }}</span>
<span>{{p.department}}</span>
<span>{{p.country}}</span>
</div>
<div ng-if="p.employeeList">
<span>{{p.employeeList.Name }}</span>
<span>{{p.employeeList.Age}}</span>
<span>{{p.employeeList.hireDate | date: "hh:mm:ss"}} </span>
</div>
</div>
</div>
答案 2 :(得分：0)
这些字段不需要另外ng-repeat。您可以像下面这样访问子JSON对象：p.employeeList.hireDate
如果某个值可能为null，您可以使用ng-if进行检查，并选择是否要显示HTML。
示例：
<div ng-repeat="p in profilesData">
<div>
<span ng-if="p.employeeList != null">{{ p.employeeList.hireDate | date: "hh:mm:ss" }}</span>
</div>
</div>
答案 3 :(得分：0)
<!DOCTYPE html>
<html>
<head>
<title>Get method</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr>
<th ng-repeat="(key, val) in result[0]">{{key}}</th>
</tr>
<tr ng-repeat="item in result">
<td ng-repeat="(key, val) in item">{{val}}</td>
</tr>
</table>
<script type="text/javascript">
var data = {
"records": [
{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
},
{
"Name": "Ana Trujillo Emparedados y helados",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Antonio Moreno Taquería",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Around the Horn",
"City": "London",
"Country": "UK"
},
{
"Name": "B's Beverages",
"City": "London",
"Country": "UK"
},
{
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
},
{
"Name": "Blauer See Delikatessen",
"City": "Mannheim",
"Country": "Germany"
},
{
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
},
{
"Name": "Bólido Comidas preparadas",
"City": "Madrid",
"Country": "Spain"
},
{
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
},
{
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
},
{
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
},
{
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
},
{
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
}
]
}
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope){
$scope.result = data.records;
});
</script>
</body>
</html>