Página de perfil

Se usan más profundamente las directivas incluídas en Angularjs y se
anidan controladores

Author: axul

app/index.html

@@ -24,7 +24,7 @@ <h2>Lista Contactos</h2>
         </div>
         <div class="row">
           <div class="col-xs-12">
-            <input type="text" ng-model="busqueda" class="form-control" placeholder="Filtrar resultados">
+            <input type="text" ng-model="busqueda" class="form-control" placeholder="Filtrar resultados" ng-change="contactos.mostrarPerfil(-1)">
           </div>
         </div>
         <table class="table table-hover table-striped table-clickable">
@@ -37,14 +37,28 @@ <h2>Lista Contactos</h2>
             </tr>
           </thead>
           <tbody>
-            <tr ng-repeat="contacto in contactos.contactosArray | filter:busqueda" class="row">
-              <td class="col-xs-3" ng-bind-html="contacto.thumb"></td>
+            <tr ng-repeat="contacto in contactos.contactosArray | filter:busqueda" class="row" ng-click="contactos.mostrarPerfil($index)">
+              <td class="col-xs-3" ng-bind-html="contacto.icon"></td>
               <td class="col-xs-3">{{contacto.nombre}}</td>
               <td class="col-xs-3">{{contacto.apellido}}</td>
               <td class="col-xs-3"><a target="_blank" ng-href="https://twitter.com/{{contacto.contacto}}">{{contacto.contacto}}</a></td>
             </tr>
           </tbody>
         </table>
+        <div class="container" ng-controller="PerfilCtrl as perfil" ng-show="contactos.isPerfilActivo()">
+          <div class="row">
+            <div class="col-xs-8">
+              <h3>Perfil de {{contactos.contactosArray[contactos.perfilActivo].nombre}}</h3>
+              <span class="img-thumbnail perfil-thumb text-center" ng-bind-html="contactos.contactosArray[contactos.perfilActivo].icon"></span>
+            </div>
+            <div class="col-xs-4 text-right">
+            <h3 ng-click="contactos.mostrarPerfil(-1)" class="btn btn-default">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <span>volver</span>
+              </h3>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <div class="row">

app/scripts/app.js

@@ -8,12 +8,44 @@ app.controller('PrincipalCtrl',['$scope',function($scope){
 }]);
 
 app.controller('ContactosCtrl',['$scope',function($scope){
+	this.perfilActivo = -1;
+
 	this.contactosArray = [
-		{nombre: 'Axel', apellido: 'Salmeron', contacto: '@axulsr', thumb: '<span class="glyphicon glyphicon-user"></span>'},
-		{nombre: 'Guillermo', apellido: 'Seminario', contacto: '@gjseminario', thumb: '<span class="glyphicon glyphicon-user"></span>'},
-		{nombre: 'Alexander', apellido: 'Rondón', contacto: '@arondn2', thumb: '<span class="glyphicon glyphicon-user"></span>'},
-		{nombre: 'José', apellido: 'Salazar', contacto: '@jslzrt', thumb: '<span class="glyphicon glyphicon-user"></span>'},
-		{nombre: 'Marlys', apellido: 'Villafranca', contacto: '@MarlysitaV', thumb: '<span class="glyphicon glyphicon-user"></span>'},
-		{nombre: 'Katrina', apellido: 'Ortiz', contacto: '@KatrinaOrtiz', thumb: '<span class="glyphicon glyphicon-user"></span>'}
+		{nombre: 'Axel', apellido: 'Salmeron', contacto: '@axulsr',
+		icon: '<span class="glyphicon glyphicon-user"></span>',
+		thumb:''},
+
+		
+		{nombre: 'Guillermo', apellido: 'Seminario', contacto: '@gjseminario',
+		icon: '<span class="glyphicon glyphicon-user"></span>',
+		thumb:''},		
+		
+		{nombre: 'Alexander', apellido: 'Rondón', contacto: '@arondn2',
+		icon: '<span class="glyphicon glyphicon-user"></span>',
+		thumb:''},
+		
+		{nombre: 'José', apellido: 'Salazar', contacto: '@jslzrt',
+		icon: '<span class="glyphicon glyphicon-user"></span>',
+		thumb:''},
+		
+		{nombre: 'Marlys', apellido: 'Villafranca', contacto: '@MarlysitaV',
+		icon: '<span class="glyphicon glyphicon-user"></span>',
+		thumb:''},
+		
+		{nombre: 'Katrina', apellido: 'Ortiz', contacto: '@KatrinaOrtiz',
+		icon: '<span class="glyphicon glyphicon-user"></span>',
+		thumb:''}
 	];
+
+	this.mostrarPerfil = function(indice){
+		this.perfilActivo = indice;
+	};
+
+	this.isPerfilActivo = function(){
+		return (this.perfilActivo==-1) ?  false : true;
+	};
+}]);
+
+app.controller('PerfilCtrl',['$scope',function($scope){
+	this.perfil = '';
 }]);

app/styles/styles.css

@@ -9,4 +9,11 @@ body{
 }
 .table.table-clickable tr{
 	cursor: pointer;
+}
+.perfil-thumb{
+	height: 100px;
+	width: 100px;
+}
+.perfil-thumb span{
+	font-size: 90px;
 }