我有以下代码显示两个人的数据,即Roshan和Ashwin,并且有嵌套数组,显示有朋友姓名,常数,asalary,msalary等的数据。
allData = [{
'id': '1',
"name": "Roshan",
"compname": [{
"id": "1",
"friend-name": "Ritik",
"typeof": [{
"id": "2",
"constant": "per holiday"
}],
"salaries": [{
"id": "2",
"msalary": "1500",
"asalary": "18000"
}]
}, {
"id": "2",
"friendname": "Rohan",
"typeof": [{
"id": "3",
"constant": "per employee"
}],
"salaries": [{
"id": "3",
"msalary": "18000",
"asalary": "25000"
}]
}
]
},
{
"id": "2",
"name": "Ashwin",
"compname": [{
"id": "8",
"friend-name": "Amit",
"typeof": [{
"id": "9",
"constant": "per holiday"
}],
"salaries": [{
"id": "6",
"msalary": "11500",
"asalary": "118000"
}]
}, {
"id": "23",
"friendname": "Kirti",
"typeof": [{
"id": "23",
"constant": "per employee"
}],
"salaries": [{
"id": "32",
"msalary": "180100",
"asalary": "253000"
}]
}]
}
]
我想要的。
我想使用ng repeat显示姓名,朋友姓名,常数,msalary和asalary。 我怎样才能做到这一点,帮助我。
答案 0 :(得分:2)
你的Json在整个过程中并不一致。
<ul ng-repeat="ad in allData">
<li>{{ad.name}}</li>
<li>
Friend Name
<ul ng-repeat="cn in ad.compname">
<li>
{{cn['friend-name']}}</br>
Salaries
<ul ng-repeat="sal in cn.salaries">
<li>
MSalary: {{sal.msalary}}
</li>
<li>
ASalary: {{sal.asalary}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
如果要访问带有“连字符”( - )的json字段名称,则需要在其周围放置方括号[]。 希望这个例子有帮助
答案 1 :(得分:2)
一些观察结果:
JSON
无效。-
(friend-name
)键的对象属性将其删除。工作演示:
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
$scope.allData =
[{
"id": "1",
"name": "Roshan",
"compname": [{
"id": "1",
"friendname": "Ritik",
"typeof": [{
"id": "2",
"constant": "per holiday"
}],
"salaries": [{
"id": "2",
"msalary": "1500",
"asalary": "18000"
}]
}, {
"id": "2",
"friendname": "Rohan",
"typeof": [{
"id": "3",
"constant": "per employee"
}],
"salaries": [{
"id": "3",
"msalary": "18000",
"asalary": "25000"
}]
}]
}, {
"id": "2",
"name": "Ashwin",
"compname": [{
"id": "8",
"friendname": "Amit",
"typeof": [{
"id": "9",
"constant": "per holiday"
}],
"salaries": [{
"id": "6",
"msalary": "11500",
"asalary": "118000"
}]
}, {
"id": "23",
"friendname": "Kirti",
"typeof": [{
"id": "23",
"constant": "per employee"
}],
"salaries": [{
"id": "32",
"msalary": "180100",
"asalary": "253000"
}]
}]
}];
});
&#13;
span {
color : red;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-repeat="data in allData">
<span>Name : </span>{{data.name}}
<div ng-repeat="list in data.compname">
<span>Friend Name : </span>{{list.friendname}}
<div ng-repeat="leaveType in list.typeof">
<span>Leave Type : </span>{{leaveType.constant}}
</div>
<div ng-repeat="salary in list.salaries">
<span>Msalary : </span>{{salary.msalary}}
<span>Asalary : </span>{{salary.asalary}}
</div>
</div>
</div>
</div>
&#13;
答案 2 :(得分:2)
起初你的Json有一些更正。缺少“]”更正版本如下,根据变量命名约定,变量名称中不能包含“ - ”
$scope.allData = [{
'id': '1',
"name": "Roshan",
"compname": [{
"id": "1",
"friend-name": "Ritik",
"typeof": [{
"id": "2",
"constant": "per holiday"
}],
"salaries": [{
"id": "2",
"msalary": "1500",
"asalary": "18000"
}]
}, {
"id": "2",
"friendname": "Rohan",
"typeof": [{
"id": "3",
"constant": "per employee"
}],
"salaries": [{
"id": "3",
"msalary": "18000",
"asalary": "25000"
}]
}
]
},
{
"id": "2",
"name": "Ashwin",
"compname": [{
"id": "8",
"friend-name": "Amit",
"typeof": [{
"id": "9",
"constant": "per holiday"
}],
"salaries": [{
"id": "6",
"msalary": "11500",
"asalary": "118000"
}]
}, {
"id": "23",
"friendname": "Kirti",
"typeof": [{
"id": "23",
"constant": "per employee"
}],
"salaries": [{
"id": "32",
"msalary": "180100",
"asalary": "253000"
}]
}]
}
]
<div ng-repeat="data in allData">
<span>{{data.name}}</span>
<div ng-repeat="companyName in data.compname">
<span>{{companyName.friendName}}</span>
<div ng-repeat="constantData in companyName.typeof">
<span>{{constantData.constant}}</span>
<div ng-repeat="salaryData in companyName.salaries">
<span>{{salaryData.msalary}}</span><br/>
<span>{{salaryData.asalary}}</span>
</div>
</div>
</div>
<br/>
</div>
我们必须记住的是JSON中的父子关系。例如,“alldata”是整体JSON的父级。“compname”是“typeof”,“薪水”等的父级。喜欢它应该显示。“常量”和“工资”div标签应该在“compname”div标签内,因为它们是“compname”的子项
答案 3 :(得分:1)
为ng-repeats和特定的Json使用div标签:
<div ng-repeat="data in allData">
<div>Name : {{ data.name }}</div>
<div ng-repeat="comp in data.compname">
<div>{{comp.friendname}}</div>
<div ng-repeat="type in comp.typeof">{{ type.constant }}</div>
<div ng-repeat="salary in comp.salaries">{{ salary.msalary }} - {{ salary.asalary }}</div>
</div>
</div>
PS:需要注意的一点 - 你的json存在不一致,在一个地方,属性名称是“friend-name”,而在另一个地方,它是“friendname”,这是不好的。
答案 4 :(得分:0)
在这里使用嵌套的ng-repeat是plunkr,我也纠正了你的json
<div ng-repeat="data in allData">
<div>Name : {{ data.name }}</div>
<div ng-repeat="comp in data.compname">
<div>{{comp.friendname}}</div>
<span ng-repeat="type in comp.typeof">{{ type.constant }}</span>
<span ng-repeat="salary in comp.salaries">
<label>msalary:{{ salary.msalary }} </label><br>
<label>asalary:{{ salary.asalary }} </label></span>
</div>
<hr>
</div>