Tabs in angularjs?

Question

Tabs in angularjs?

Navigation

#1 by (2 votes)

0

How do I add the tab in Angularjs? I realized that doing it in a normal way and clicking on a tab will direct me to the main page (the one I order when there is not one)

Do I have to create a driver? How would that be?

<section class="central">
    <ul class="res nav nav-tabs">
      <li class="active"><a data-toggle="tab" href="col">NORMAL</a></li>
      <li><a data-toggle="tab" href="rpam">PRIORITARIO</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade in active" id="#col">
          <div class="contenido" id="contenido1">
            jsjsjs
          </div>
        </div>
        <div class="tab-pane fade" id="#cal">
          <div class="contenido" id="contenido2">
            ojojo
          </div>
        </div>
    </div>

angularjs

asked by Hernan Humaña 22.09.2016 в 15:14

source

1 answer

Add text as a watermark to images; 1 error prohibiting this request from being saved: Tought must exist

score 2 · Answer 1

It's really simple. To make you understand better, I'll give you a small example.

Driver

angular.module('app', [])
  .controller('TabController', ['$scope', function($scope) {
    $scope.tab = 1;

    $scope.setTab = function(newTab){
      $scope.tab = newTab;
    };

    $scope.isSet = function(tabNum){
      return $scope.tab === tabNum;
    };
}]);

Vista

<ul class="nav nav-pills nav-stacked">
   <li ng-class="{ active: isSet(1) }">
     <a href ng-click="setTab(1)">Principal</a>
   </li>
   <li ng-class="{ active: isSet(2) }">
     <a href ng-click="setTab(2)">Ventas</a>
   </li>
   <li ng-class="{ active: isSet(3) }">
     <a href ng-click="setTab(3)">Compras</a>
   </li>
</ul>

If you notice we use ng-click , where we call the method setTab of the controller, passing it the index of the tab. As a bonus, I use ng-class to add a CSS class to the active tab as soon as it is.

Now, it is assumed that each of these tabs renders a content associated with them. For this it is enough to make use of ng-show in the same way that we use it in the tabs:

<div class="jumbotron">
  <div ng-show="isSet(1)">
    <h1>Principal</h1>
  </div>
  <div ng-show="isSet(2)">
    <h1>Ventas</h1>
  </div>
  <div ng-show="isSet(3)">
    <h1>Compras</h1>
  </div>
</div>

If we click on the Principal tab, the div with the <h1>Principal</h1> will be displayed and the class active will be added to the tab.