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 A B

但是，输出首先显示 ng-repeat items，然后是 ng-switch-when声明。

这是为什么？

是否有替代解决方案可以按照我的预期顺序执行此类操作？

JSFiddle sample here.

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

更新(2014/04/02):

这里解释了为什么 ng-show 不是一个选项。

我写了一个这样的指令表:

<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>

checkbox 变量用于控制是否应显示复选框输入。

在我应用 JQuery ColResize 之前，它工作正常。

当checkbox 变量为 false 时，ng-show 会隐藏第一个 第 元素。

并且隐藏的 th 元素以某种方式导致 JQuery ColResize 发生故障。

因此ng-show不适合这种情况。

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

当前解决方案:

我目前的解决方案是使用 ng-switch 来分隔两个 table 元素。

并使用一个变量来决定绘制哪个表格。

像这样:

<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>

ng-show 在指令分别用于显示/隐藏的 DOM 元素周围应用样式。在您的情况下， header 已正确编译，但只会根据提供给 ng-show 的条件显示。