angularjs - 如何使用 ng-show 在 Angular Boostrap UI 中隐藏选项卡？

Question

我正在尝试使用角度引导 UI 和 ng-show 显示一个选项卡。它根本行不通。

<tabs ng-model="currentTab">
    <pane heading="Triggers" active="panes['triggers'].active" ng-show="condition">

    </pane>
    <pane heading="Recipients" active="panes['recipients'].active">
</tabs>

任何想法如何按需隐藏它？

Answer 1

如果你想隐藏/显示一个组件，只需为你的切换创建一个指令，在点击时切换选项卡 CSS 类。类似于...的东西

.directive('tabToggle', function() {

return function (scope, element, attrs) {

    element.on('click', function(e){

        $('.myTabComponent').toggleClass('hide', 'show');

    });
};

})

Answer 2

如果您不介意在控制器中而不是在标记中定义选项卡和选项卡内容，那么最简单的方法可能是对窗格元素进行 ng-repeat。

然后，您可以在控制器中维护一组选项卡，根据需要从数组中添加和删除。这种方法增加了它自己的约束，但工作得相当好。

有关粗略示例，请参见http://plnkr.co/edit/RteTQxFPKCqFgMCEWdJY。

这源自动态选项卡的文档示例。