AngularJS's ng-repeat in line, coma-separated, two attributes in the same line

Question

This is my 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"}] } ]

I want to display it like this:

New York: - journlists: Alice, Bob - players: Mike, Tom Barcelona: - journlists: John - players: James, Paul - managers: Kenny, Tim

Let's say I can get the json data from scope $scope.myJson. I can't figure out how to use ng-repeat and ng-show (do not show empty arrays) together to achieve this.

Oktay Myumyunov · Accepted Answer · 2020-07-01 11:36:45Z

You need to have multiple ng-repeats, because you have multiple arrays. To hide empty rows use ng-if with .length

<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>

Collectives™ on Stack Overflow

AngularJS's ng-repeat in line, coma-separated, two attributes in the same line

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related