angularjs - 使用 Angular 有条件地隐藏选项卡

Question

我正在使用 Angular 头版中的选项卡示例。我想使用复选框选项有条件地隐藏其中一个选项卡（类似于“显示高级”......

<pane title="Pluralization" ng-show="showPlural">

我在这里建立了一个例子......

http://jsfiddle.net/michaeldausmann/RJEGY/#base

它不起作用，无论复选框是否打开，选项卡都无法正确呈现。在我深入研究并重构 tabs 指令之前，有人已经解决了这个问题吗？还是我可以尝试其他选项卡实现？

迈克尔

Answer 1

好的，我想通了。需要破解指令以在窗格中获取新属性（显示选项卡）。

  scope: { 
          title: '@',
          tabshow: "="
         },

然后 ng-hide 选项卡模板中的元素...

  template:
    '<div class="tabbable">' +
      '<ul class="nav {{navclass}}">' +
        '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}" ng-hide="pane.tabshow==false">'+
          '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
        '</li>' +
      '</ul>' +
      '<div class="{{tclass}} tab-content" ng-transclude></div>' +
    '</div>',

和窗格模板

  template:
    '<div ng-hide="tabshow==false" class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
    '</div>',

然后在页面中，使用 tabshow 而不是 ng-show..

看看小提琴。

http://jsfiddle.net/michaeldausmann/RJEGY/1/

高温高压

迈克尔