CODEWITHSUNDEEP
javascriptangularjs
user3398172
user3398172

Reputation: 811

make jquery tab using ngRoute angularjs doesn't work

I try to add item in tab 1, then navigate to the next tab, when I come back, things will got reset.

http://plnkr.co/edit/ETxaZ2ESI9ftCOUSRDcP?p=preview

what is the best approach to build jquery tab using angular? ngshow and hide is not that friendly as it makes the view complicated and messy.

Upvotes: 0

Views: 505

Answers (1)

Alex Choroshin
Alex Choroshin

Reputation: 6187

I would suggest using Bootstrap components written by the AngularUI Team. you can find a great set of Twitter Bootstrap components including Tabs control.

example:

<div ng-controller="TabsDemoCtrl">
  <p>Select a tab by setting active binding to true:</p>
  <p>
    <button class="btn btn-default btn-sm" ng-click="tabs[0].active = true">Select second tab</button>
    <button class="btn btn-default btn-sm" ng-click="tabs[1].active = true">Select third tab</button>
  </p>
  <p>
    <button class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
  </p>
  <hr />

  <tabset>
    <tab heading="Static title">Static content</tab>
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
      {{tab.content}}
    </tab>
    <tab select="alertMe()">
      <tab-heading>
        <i class="glyphicon glyphicon-bell"></i> Alert!
      </tab-heading>
      I've got an HTML heading, and a select callback. Pretty cool!
    </tab>
  </tabset>

  <hr />

  <tabset vertical="true" type="navType">
    <tab heading="Vertical 1">Vertical content 1</tab>
    <tab heading="Vertical 2">Vertical content 2</tab>
  </tabset>

  <hr />

  <tabset justified="true">
    <tab heading="Justified">Justified content</tab>
    <tab heading="SJ">Short Labeled Justified content</tab>
    <tab heading="Long Justified">Long Labeled Justified content</tab>
  </tabset>
</div>

js:

var TabsDemoCtrl = function ($scope) {
  $scope.tabs = [
    { title:"Dynamic Title 1", content:"Dynamic content 1" },
    { title:"Dynamic Title 2", content:"Dynamic content 2", disabled: true }
  ];

  $scope.alertMe = function() {
    setTimeout(function() {
      alert("You've selected the alert tab!");
    });
  };

  $scope.navType = 'pills';
};

Live example: http://plnkr.co/edit/ExDYMWfK0FKgk0IDw47q?p=preview

Upvotes: 1

Related Questions