使用ngRoute angularjs不起作用让jQuery的标签 [英] make jquery tab using ngRoute angularjs doesn't work

问题描述

我尝试在标签加1项，然后导航到下一个选项卡，我回来的时候，事情就会被重置。

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=$p$ PVIEW

什么是采用了棱角分明建立jQuery的标签最好的方法？ ngshow并且因为它使视图复杂，凌乱的隐藏是不是友好的。

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.

推荐答案

我会建议使用引导组件由AngularUI团队编写的。你可以找到一个伟大的一套Twitter的引导组件，包括标签的控制。

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

例如：

<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';
};

活生生的例子： http://plnkr.co/edit/ExDYMWfK0FKgk0IDw47q?p= preVIEW

这篇关于使用ngRoute angularjs不起作用让jQuery的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！