javascript - AngularJS的ng-repeat in line，逗号分隔，两个属性在同一行

Question

这是我的 JSON。

[
 {
   "site":"New York",
   "players":[{"name":"Mike"},{"name":"Tom"}],
   "journalists":[{"name":"Alice"},{"name":"Bob"}],
   "managers":[]
 },
 {
   "site":"Barcelona",
   "players":[{"name":"James"},{"name":"Paul"}],
   "journalists":[{"name":"John"}],
   "managers":[{"name":"Kenny"},{"name":"Tim"}]
 }
]

我想这样显示它：

New York:
 - journlists: Alice, Bob
 - players: Mike, Tom

Barcelona:
 - journlists: John
 - players: James, Paul
 - managers: Kenny, Tim

假设我可以从范围 $scope.myJson 获取 json 数据。我不知道如何一起使用 ng-repeat 和 ng-show （不显示空数组）来实现这一点。

标签： javascriptjsonangularjs

Answer 1

您需要有多个 ng-repeats，因为您有多个数组。要隐藏空行，请使用带有 .length 的 ng-if

<div ng-repeat="item in myJson">
<h1>{{item.site}}:</h1><br />
<ul>
 <li ng-if="item.journalists.length > 0">- journalists: <span ng-repeat="journalist in item.journalists">{{journalist.name}}<span ng-if="!$last">, </span></span></li>
 <li ng-if="item.players.length > 0">- players: <span ng-repeat="player in item.players">{{player.name}}<span ng-if="!$last">, </span></span></li>
 <li ng-if="item.managers.length > 0">- managers: <span ng-repeat="manager in item.managers">{{manager.name}}<span ng-if="!$last">, </span></span></li>
</ul>
</div>