Порядок рендеринга AngularJS ng-switch

Question

У меня вопрос о порядке рендеринга ng-switch.

Код (HTML):

<div ng-controller="testCtrl"> 
<button ng-click="v1 = !v1">toggle v1</button> 
<table class="table table-bordered"> 
    <tbody> 
     <tr ng-switch on="v1"> 
      <th ng-switch-when="true">V1</th> 
      <th ng-repeat="item in datas">{{item}}</th> 
     </tr> 
    </tbody> 
</table> 

код (Javascript):

var myApp = angular.module('myApp',[]); 
function testCtrl($scope) { 
    $scope.datas = ['A', 'B']; 
} 

Я ожидал, что результат по порядку:

V1 AB

Но вместо этого, вывод показывает нг-повтор элементов первых, а затем нг-выключатель когда это заявления.

Почему это?

Есть ли альтернативное решение, чтобы сделать такую ​​вещь в ожидаемом порядке?

JSFiddle sample here.

============================

Обновление (2014/04/02) :

Вот объяснение того, почему нг-шоу не вариант.

Я пишу таблицу, как это директива:

<table class="table table-bordered"> 
    <thead> 
     <tr> 
      <th ng-show="checkbox"><input type="checkbox" /></th> 
      <th ng-repeat="col in columns">{{col.text}}</th> 
     </td> 
    </thead> 
    <!-- body is ignored --> 
</table> 

флажок переменная для управления, должен ли быть показан входной флажок.

Это работает отлично, пока я применять JQuery ColResize.

Когда флажок переменная является ложным, нг-шоу скрывает первый й элемент.

И как-то скрытый й элемент вызывает JQuery ColResize неисправности.

Поэтому ng-show не подходит для этой ситуации.

========================

Текущее решение:

Мое текущее решение использует ng- переключатель для разделения двух стол элемент.

И используйте одну переменную, чтобы решить, какой стол для рисования.

Как это:

<div ng-switch on="checkbox"> 
    <table ng-switch-when="true"> 
     <tr> 
      <th><input type="checkbox" /></th> 
      <th ng-repeat="col in columns">{{col.text}}</th> 
     </tr> 
     <!-- body is ignored --> 
    </table> 
    <table ng-switch-default> 
     <tr> 
      <th ng-repeat="col in columns">{{col.text}}</th> 
     </tr> 
     <!-- body is ignored --> 
    </table> 
</div> 

Хотя это решить проблему, это не является хорошим решением.

Но пока я не найду альтернативное решение.

Думаю, мне придется согласиться на это.

Answer 1

Вы можете использовать ng-show вместо ng-switch, как показано в этом модифицированный JSFIDDLE

<tr> 
    <th ng-show="v1">V1</th> 
    <th ng-repeat="item in datas">{{item}}</th> 
</tr> 

нг-шоу применяется стиль вокруг элемента DOM, где директива используется, чтобы показать/скрыть соответственно. В вашем случае заголовок компилируется соответствующим образом, но будет отображаться только на основании условия, которое предоставляется ng-show.