Question

前提：我已经看过几个类似的问题。但我无法弄清楚如何解决我的疑问。

我有一个对象数组：

$scope.messages = [obj1, obj2, ...];

其中每个对象具有以下结构：

{
   id: <int>,
   printOnlyFirst: <boolean>,
   text1: <string>,
   text2: <string>
}

其中text1 / text2根据 printOnlyFirst 有条件地打印（通过追踪实时）。

<div id="container">
    <div ng-switch="printOnlyFirst" ng-repeat="message in messages track by message.id">
        <div ng-switch-when="true" class="text1"> <!-- case 1 -->
            {{message.text1}
        </div>
        <div ng-switch-when="false" class="text2"> <!-- case 2 -->
            {{message.text2}
        </div>
    </div>
</div>

我认为这段代码很好。

但是我注意到了

<div ng-switch="printOnlyFirst" ng-repeat="message in messages track by message.id">

为ng-repeat循环的每个单独元素打印

及其内容（案例1或2）。

这是正常的吗？有没有更好的解决方案来避免这种DOM开销？

Answer 1

来自https://docs.angularjs.org/api/ng/service/$compile#-priority-：

首先编译具有更大数字priority的指令。

ngSwitch执行优先级为1200而ngRepeat执行优先级为1000，这不是您需要的订单。

您必须使用嵌套组件（例如div）：

<div id="container">
    <div ng-repeat="message in messages track by message.id">
        <div ng-switch="message.printOnlyFirst">
            <div ng-switch-when="true" class="text1"> <!-- case 1 -->
                {{message.text1}
            </div>
            <div ng-switch-when="false" class="text2"> <!-- case 2 -->
                {{message.text2}
            </div>
        </div>
    </div>
</div>

请勿忘记启用message.printOnlyFirst而不是printOnlyFirst。

ng-repeat + ng-switch：如何正确使用？

1 个答案: