Show JSON data as selected in Select AngularJS -
i don' have lot of knowledge angularjs. have json data , first created select , according selected option show data or others according value, ids in 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 } ] }, ...];
html
<select id="select-players" ng-model="jugador" ng-options="jugador (jugador.player.name.first + ' ' + jugador.player.name.last) jugador in players track jugador.player.id " ng-change="show()"> <option value="">select player...</option> </select>
and want show details of player
<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>
i don't know if need create in controller 1 switch or using if , else if , how can call in html show details.
thanks
you using iterated current object jugador in place of using model name jugador. try using jugador.player.name.first instead of jugador.player.name.first , should work fine if rest of things ok. don't see need of ng-change="show()" in case. model changes automatically change select value , can use it.
you use iterated object name jugador while doing ng-repeat.
wiki
Comments
Post a Comment