更新（2014/04/02）：

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>

代码（Java脚本）：

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>

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

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

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

隐藏的元素会导致 JQuery ColResize 出现故障。

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

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

当前解决方案：

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

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

像这样：

<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元素周围应用样式，其中指令分别用于显示/隐藏。在您的情况下，标头已正确编译，但只会根据提供给ng-show的条件显示。

AngularJS ng-switch渲染顺序

更新（2014/04/02）：

当前解决方案：

1 个答案: