与AngularJS嵌套的ng-repeat

我似乎无法从AngularJS中嵌套的ng-repeat中获取我需要的值。与AngularJS嵌套的ng-repeat

我从服务器发送以下数据：

[{"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"}]}]

以及用于在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>

我没有看到任何的“游戏”值是从输出第二次ng-repeat，我不知道我做错了什么？

来源

2013-09-24 RyanP13

<li class="clearfix" ng-repeat="game in turn">

应该

<li class="clearfix" ng-repeat="game in value">

来源

2013-09-24 06:38:58 AlwaysALearner

嗨。我只在对象上循环以获取要在UI中显示的键。我应该使用相同的对象循环来输出嵌套数组吗？ – RyanP13

我不明白你想要做什么，但上面是你应该如何循环数据。 – AlwaysALearner

是的，现在明白了 – RyanP13

必要在数据的一些变化和HTML做出要求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>

请参考下面拨弄

http://jsfiddle.net/U3pVM/1476/

来源

2013-09-30 09:19:00

与AngularJS嵌套的ng-repeat

回答

相关问题