與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

回答

相關問題