如何使用ng-show隐藏Angular Bootstrap UI中的选项卡？

Question

我正在尝试使用angular bootstrap 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以获取粗略的示例。

这是从动态标签的文档示例中获得的。