I cannot seem to get out the values I need from a nested ng-repeat in AngularJS.
I have the following data sent from the server:
[{"Your Turn":[{"gameToken":"sSFK0OHhYa8M4F6Z5Z1uNFnawQNVkZXj1GZyTEeSv2h8gntr9UrEU5FQsR9r8YWMWvjA6tePINbOm2Fc5u8U659QaRK0dju0","friendId":"522eec17e4b088a0a939cfdb","friendName":"Michelle","status":"You are waiting for Michelle Miguelamimio Agoramarketomercado to accept your challenge"}]},{"Their Turn":[{"gameToken":"sSFK0OHhYa8M4F6Z5Z1uNFnawQNVkZXj1GZyTEeSv2h8gntr9UrEU5FQsR9r8YWMWvjA6tePINbOm2Fc5u8U659QaRK0dju0","friendId":"522eec17e4b088a0a939cfdb","friendName":"Michelle Miguelamimio Agoramarketomercado","status":"You are waiting for Michelle to accept your challenge"}]}]
And the following template for the HTML:
<div ng-repeat="turn in data">
<p>{{turn}}</p>
<ul class="list-bare list-inline tab-group">
<li ng-repeat="(key, value) in turn" class="tab tab-active txt-upper {{key | lowercase}}">{{key}}</li>
</ul>
<ul class="list-bare list-users clearfix">
<li class="clearfix" ng-repeat="game in turn">
<div class="avatar-container">
<img class="avatar" ng-src="{{baseUrl}}/shobo/user/avatar/{{game.friendId}}" alt="{{game.friendName}}" />
</div>
<div class="list-users-info">
<h3 class="text-cap">{{game.friendName}}</h3>
<p>{{game.status}}</p>
</div>
<div class="list-users-status txt-center" ng-click="acceptChallenge(game.gameToken,game.friendId)">
<div><i class="icon-chevron-right"></i></div>
</div>
</li>
</ul>
</div>
I am not seeing any of the 'game' values being output from the second ng-repeat and am not sure what i am doing wrong?
<li class="clearfix" ng-repeat="game in turn">
应该
<li class="clearfix" ng-repeat="game in value">
need to make some changes in data and html to make require html
$scope.data=[{
"Title":"Your Turn",
"Turn": [{
"gameToken":"sSFK0OHhYa8M4F6Z5Z1uNFnawQNVkZXj1GZyTEeSv2h8gntr9UrEU5FQsR9r8YWMWvjA6tePINbOm2Fc5u8U659QaRK0dju0",
"friendId": "522eec17e4b088a0a939cfdb",
"friendName": "Michelle",
"status": "You are waiting for Michelle Miguelamimio Agoramarketomercado to accept your challenge"
}]
}, {
"Title":"Their Turn",
"Turn": [{
"gameToken": "sSFK0OHhYa8M4F6Z5Z1uNFnawQNVkZXj1GZyTEeSv2h8gntr9UrEU5FQsR9r8YWMWvjA6tePINbOm2Fc5u8U659QaRK0dju0",
"friendId": "522eec17e4b088a0a939cfdb",
"friendName": "Michelle Miguelamimio Agoramarketomercado",
"status": "You are waiting for Michelle to accept your challenge"
}]
}];
HTML
<div ng-repeat="turn in data">
<ul class="list-bare list-users clearfix">
<h1>{{turn.Title}}</h1>
<li class="clearfix" ng-repeat="game in turn.Turn">
<div class="avatar-container">
<img class="avatar" ng-src="{{baseUrl}}/shobo/user/avatar/{{game.friendId}}" alt="{{game.friendName}}" />
</div>
<div class="list-users-info">
<h3 class="text-cap">{{game.friendName}}</h3>
<p>{{game.status}}</p>
</div>
<div class="list-users-status txt-center" ng-click="acceptChallenge(game.gameToken,game.friendId)">
<div><i class="icon-chevron-right"></i></div>
</div>
</li>
</ul>
</div>
please refer below fiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.