AngularJSの選択でJSONデータを表示

Question

AngularJSについて多くの知識を持っていません。私はすべてのデータをJSONを持っているし、最初の私が選択して、私はJSON

JSON

$scope.players = [ 
     { 
      "player": { 
       "info": { 
       "position": "D", 
       "shirtNum": 4, 
       "positionInfo": "Centre/Right Central Defender" 
       }, 
       "nationalTeam": { 
       "isoCode": "BE", 
       "country": "Belgium", 
       "demonym": "Belgian" 
       }, 
       "age": "27 years 139 days", 
       "name": { 
       "first": "Toby", 
       "last": "Alderweireld" 
       }, 
       "id": 4916, 
       "currentTeam": { 
       "name": "Tottenham Hotspur", 
       "teamType": "FIRST", 
       "shortName": "Spurs", 
       "id": 21 
       } 
      }, 
      "stats": [ 
       { 
       "name": "goals", 
       "value": 5 
       }, 
       { 
       "name": "losses", 
       "value": 20 
       }, 
       { 
       "name": "wins", 
       "value": 48 
       }, 
       { 
       "name": "draws", 
       "value": 23 
       }, 
       { 
       "name": "fwd_pass", 
       "value": 1533 
       }, 
       { 
       "name": "goal_assist", 
       "value": 2 
       }, 
       { 
       "name": "appearances", 
       "value": 80 
       }, 
       { 
       "name": "mins_played", 
       "value": 6953 
       }, 
       { 
       "name": "backward_pass", 
       "value": 308 
       } 
      ] 
      }, 
...]; 

でIDが値に応じていくつかのデータ等を表示選択したオプションに応じて作成されましたHTML

<select id="select-players" ng-model="Jugador" ng-options="jugador as (jugador.player.name.first + ' ' + jugador.player.name.last) for jugador in players track by jugador.player.id " ng-change="show()"> 
    <option value="">Select a player...</option> 
</select> 

そして、私は選手

<div class="content-player"> 
    <div class="img-team"><span class="img-escudo"><img src="img/tottenham.png" /></span></div> 
      <p class="name-player">{{jugador.player.name.first}} {{jugador.player.name.last}} <span class="pos-player">{{jugador.info.positionInfo}}</span></p> 
      <div class="cont-desc-player"> 
       <div class="desc-player"> 
        <span class="txt-estadistics">{{jugador.stats.name}}</span> 
        <span class="num-estadistics">{{jugador.stats.value}}</span> 
       </div> 
       <div class="desc-player separador"> 
        <span class="txt-estadistics">{{jugador.info.positionInfo}}</span> 
        <span class="num-estadistics">{{jugador.stats.value}}</span> 
       </div> 
       <div class="desc-player separador"> 
         <span class="txt-estadistics">{{jugador.info.positionInfo}}</span> 
         <span class="num-estadistics">{{jugador.stats.value}}</span> 
        </div> 
        <div class="desc-player separador"> 
         <span class="txt-estadistics">{{jugador.info.positionInfo}}</span> 
         <span class="num-estadistics">{{jugador.stats.value}}</span> 
        </div> 
        <div class="desc-player separador"> 
         <span class="txt-estadistics">{{jugador.info.positionInfo}}</span> 
         <span class="num-estadistics">{{jugador.stats.value}}</span> 
        </div> 
      </div> 
     </div> 

の詳細を表示したいです私はコントローラー内で1つのスイッチを作成する必要があるかどうか、またはifとelseのみを使用する必要があるかどうか、HTMLを詳細に表示する方法を知りません。

おかげ

Answer 1

あなたはモデル名Jugadorを使用する代わりに繰り返し、現在のオブジェクトjugadorを使用しています。 Jugador.player.name.first代わりのがをjugador.player.name.first、物事の残りの部分がOKであれば、それは正常に動作する必要がありを使用してみてください。 あなたのケースでは、ng-change = "show（）"の必要もありません。選択値を変更するとモデルが自動的に変更され、使用することができます。

ng-repeatを実行している間、反復オブジェクト名jugadorを使用します。