显示选择AngularJS中选择的JSON数据

时间:2017-08-21 16:20:08

标签: angularjs json html5

我不喜欢'有很多关于AngularJS的知识。我有一个包含所有数据的JSON,首先我创建了一个select,根据选择的选项,我根据值显示了一些数据或其他数据,这些是json中的ID

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
              }
            ]
          },
...];

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>

我不知道是否需要在控制器中创建一个开关或仅使用if和else if是否良好以及如何在HTML中调用它来显示详细信息。

由于

1 个答案:

答案 0 :(得分:3)

您使用的是迭代的当前对象 jugador ,而不是使用模型名称 Jugador 。尝试使用 Jugador.player.name.first 而不是 jugador.player.name.first ,如果其余的事情没问题,它应该可以正常工作。 在您的案例中,我也没有看到 ng-change =&#34; show()&#34; 的需要。更改选择值时模型会自动更改,您可以使用它。

在进行ng-repeat时使用迭代对象名称 jugador