3

我对使用 Angular 和 AngularStrap 指令有点陌生。我需要使用带有静态标记的 tab 指令，例如：

<div data-fade="1" bs-tabs>
  <div data-title="'Home'"><p>Static tab content A</p></div>
  <div data-title="'Profile'"><p>Static tab content B</p></div>
</div>

在页面的另一部分，我只想在选择第一个选项卡时显示一个 div。div 不是选项卡的一部分，而是在同一个整体控制器中。如何根据所选选项卡显示/隐藏此 div？

像这样的东西？

<div ng-show="???? active tab stuff here ????">Home tab is selected</div>

谢谢你的帮助。

4

2 回答 2

4

如 AngularStrap 页面上的示例所示，活动点击存储在

tabs.activeTab

因此，您可以使用此属性有条件地显示其他类似的内容

<div ng-show="tabs.activeTab == 0">The first tab is active</div>

更新

即使使用非对象选项卡，您也可以将模型绑定到 bs-tabs 以存储活动 ID，如下所示：

<div data-fade="1" ng-model="tabs.activeTab" bs-tabs>

这是一个更新的plnkr。（单击第三个选项卡并看到“测试”文本出现）

于 2013-03-22T21:26:46.197 回答
0

我现在发现了一些解决这个问题的方法。这似乎不是最好的方法，所以如果有人有更好的想法，请分享。

我意识到 bsTabs 指令正在为每个选项卡创建数据切换属性。通过观看数据切换显示事件，我能够识别选项卡更改并显示 div。控制器代码如下所示：

    $scope.HomeTabSelected = true;

    function watchTab() {
        $('a[data-toggle="tab"]').on('shown', function (e) {
            $scope.$apply($scope.HomeTabSelected = (e.target.innerHTML == "Home"));
        })
    }

    setTimeout(watchTab, 2000);  // setTimeout necessary to allow directive to render

HTML div 使用 ng-show。

    <div ng-show="HomeTabSelected">Home tab is selected</div>
于 2013-03-23T00:42:59.810 回答