Esta directiva hace un foreach de cada elemento de una variable de tipo array
(function () {
var app = angular.module('pokedex', []);
app.controller('PokemonController', function () {
this.pokemon = {
id: "001",
name: "Bulbasaur",
species: "Seed Pokémon",
type: [ "Grass", "Poison" ],
height: "2′4″ (0.71m)",
weight: "15.2 lbs (6.9 kg)",
abilities: [ "Overgrow", "Chlorophyll" ],
stats: {
hp: 45,
attack: 49,
defense: 49,
"sp.atk": 65,
"sp.def": 65,
speed: 45,
total: 318
},
evolution: [ "Bulbasaur", "Ivysaur", "Venusaur" ]
};
});
})();
<!DOCTYPE html>
<html ng-app="pokedex">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pokédex</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="img/logo.png">
Pokédex
</a>
</div>
</div>
</div>
<div class="container">
<!-- pokemon -->
<div ng-controller="PokemonController as pkmCtrl">
<div class="page-header">
<h1>
{{pkmCtrl.pokemon.name}}
<small>{{pkmCtrl.pokemon.species}}</small>
<span class="label label-primary pull-right">#{{pkmCtrl.pokemon.id}}</span>
</h1>
</div>
<div class="row">
<div class="col-md-6">
<img class="avatar center-block" ng-src="img/pokemons/{{pkmCtrl.pokemon.name | lowercase}}.jpg">
</div>
<div class="col-md-6">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Pokédex</a></li>
<li><a href="#">Stats</a></li>
<li><a href="#">Evolution</a></li>
</ul>
<div class="tab-content">
<!-- Pokedex -->
<div>
<ul class="list-group">
<li class="list-group-item">
<strong>Type</strong>
<span class="pull-right">
<span class="label type type-{{type | lowercase}}" ng-repeat="type in pkmCtrl.pokemon.type">
{{type}}
</span>
</span>
</li>
<li class="list-group-item">
<strong>Height</strong>
<span class="pull-right">{{pkmCtrl.pokemon.height}}</span>
</li>
<li class="list-group-item">
<strong>Weight</strong>
<span class="pull-right">{{pkmCtrl.pokemon.weight}}</span>
</li>
<li class="list-group-item">
<strong>Abilities</strong>
<ul>
<li ng-repeat="ability in pkmCtrl.pokemon.abilities">
{{ability}}
</li>
</ul>
</li>
</ul>
</div>
<!-- Stats -->
<div>
<ul class="list-group">
<li class="list-group-item">
<strong>HP</strong>
<span class="badge">{{pkmCtrl.pokemon.stats.hp}}</span>
</li>
<li class="list-group-item">
<strong>Attack</strong>
<span class="badge">{{pkmCtrl.pokemon.stats.attack}}</span>
</li>
<li class="list-group-item">
<strong>Defense</strong>
<span class="badge">{{pkmCtrl.pokemon.stats.defense}}</span>
</li>
<li class="list-group-item">
<strong>Special Attack</strong>
<span class="badge">{{pkmCtrl.pokemon.stats['sp.atk']}}</span>
</li>
<li class="list-group-item">
<strong>Special Defense</strong>
<span class="badge">{{pkmCtrl.pokemon.stats['sp.def']}}</span>
</li>
<li class="list-group-item">
<strong>Speed</strong>
<span class="badge">{{pkmCtrl.pokemon.stats.speed}}</span>
</li>
<li class="list-group-item">
<strong>Total</strong>
<span class="badge">{{pkmCtrl.pokemon.stats.total}}</span>
</li>
</ul>
</div>
<!-- Evolution -->
<div>
<div class="text-center" ng-repeat="pokemon in pkmCtrl.pokemon.evolution">
<a href="#">
<img src="img/pokemons/{{pokemon | lowercase}}.jpg" width="160">
<p>
<strong>{{pokemon}}</strong>
</p>
</a>
<span ng-hide="$last" class="glyphicon glyphicon-arrow-down"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /pokemon -->
</div>
<script src="js/lib/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
No hay comentarios:
Publicar un comentario