Hoy voy a compartirles como combinar las pestañas (Tabs) de Bootstrap con AngularJs; de tal manera que las pestañas sean dinamicas. Este ejercicio será bastante básico, y quizá sea necesario que lo extiendas tu mismo, si requieres mas funcionalidad.
Para empezar, tengo el siguiente JSON (Generado por una consulta a una base de datos):
[{"DEFAULT_TEXT":"peiis"},{"DEFAULT_TEXT":"ehCMK"},{"DEFAULT_TEXT":"ehCEN"}]
Ahora, necesito que se vea asi:
Además, que cuando cambie mi selección, haga lo mismo que cuando lo hago con Bootstrap:
El código es bastante sencillo, lo primero que hacemos es crear el código HTML:
<body id="ng-tab" class="container-fluid app-content" ng-app="myApp" ng-controller="tabs">
<h1>Combinar AngularJs con Bootstrap Tabs</h1>
<hr/>
<ul class="nav nav-tabs">
<li ng-repeat="app in aplicacionesUsuario" ng-class="{'active':$index == selectedTab}"><a data-toggle="tab" ng-click="SelectTab($index);" href="#">{{app.DEFAULT_TEXT}}</a></li>
</ul>
<div class="tab-content">
<div ng-repeat="app in aplicacionesUsuario" id="{{$index}}" class="tab-pane fade in" ng-class="{'active':$index == selectedTab}">
<h3>{{app.DEFAULT_TEXT}}</h3>
<p>Some content.</p>
</div>
</div>
</body>
Este sería el código Javascript:
var myApp = angular.module('myApp', []);
myApp.controller('tabs', function ($scope, $http) {
$scope.aplicacionesUsuario = [{"DEFAULT_TEXT": "peiis"}, {"DEFAULT_TEXT": "ehCMK"}, {"DEFAULT_TEXT": "ehCEN"}];
$scope.selectedTab = 0; //Establecer la pestaña seleccionada
//función para seleccionar pestaña
$scope.SelectTab = function (i) {
$scope.selectedTab = i;
};
});
Listo, solo no olvides agregar las referencias CSS y Javascript correspondientes...
No hay comentarios:
Publicar un comentario