Bootstrap选项卡活动/非活动和Angularjs

时间:2015-11-12 22:07:15

标签: javascript angularjs twitter-bootstrap tabs

我在这里使用Angularjs和Bootstrap标签我的代码:

  <body  ng-controller="TabsCtrl">
    <button ng-click="addNewWorkspace('jobs')">Open Tab jobs<i class="icon-plus-sign"></i></button> 
    <button ng-click="addNewWorkspace('invoices')">Open Tab invoices<i class="icon-plus-sign"></i></button> 
    <button ng-click="addNewWorkspace('payments')">Open Tab payments<i class="icon-plus-sign"></i></button> 

    <ul class="nav nav-tabs">
      <li ng-class="tabClass(tab)" ng-repeat="tab in tabs" tab="tab">
        <a href="{{tab.link}}" ng-click="setSelectedTab(tab)">{{tab.label}}
        <button ng-click="removeTab($index)">-<i class="fa fa-times"></i></button>
        </a>
      </li>
    </ul>
    <div ng-view></div>

  </body>

当我按任意按钮时,它会打开一个新标签,这是我的第一个问题,标签已创建但未激活,我需要按下创建的标签以查看信息。

我的第二个问题是,当我打开任何选项卡并关闭时,选项卡不会显示有关其他选项卡打开的信息。例如:我打开付款并打开此选项卡,当我关闭它时不显示工作信息。

我做了什么?

我在添加/删除工作区时尝试使用$location.path来强制显示任何其他选项卡,但这不起作用。我也尝试$window同样的结果。

我不知道我是否在这里混淆了这些概念。

Live Demo With complete code

1 个答案:

答案 0 :(得分:1)

class Foo: NSObject { ... }

选择当前标签为selectedTab

$scope.addNewWorkspace = function(page) {
var tab = {
    link: '#/' + page,
    label: page
};
$scope.tabs.push(tab);
$scope.selectedTab = tab;
$location.path('/' + tab.label);
};

重定向到新位置

$scope.selectedTab=tab;