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

Premise: I've seen several similar questions. But I can't really figure out how to solve my doubt.

前提:我见过几个类似的问题。但我无法弄清楚如何解决我的疑问。

I have an array of objects:

我有一个对象数组:

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

where each object has the following structure:

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

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

where text1 / text2 are conditionally printed (in real time through track by) according to printOnlyFirst.

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

I think this code is fine.

我认为这段代码很好。

However I noticed that

但是我注意到了

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

is printed for each single element of the ng-repeat loop, together with it's content (either case 1 or 2).

为ng-repeat循环的每个单独元素打印,以及它的内容(情况1或2)。

Is this normal? Is there a better solution to avoid such DOM overhead?

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

1 个解决方案

#1

From https://docs.angularjs.org/api/ng/service/$compile#-priority-:

Directives with greater numerical priority are compiled first.

首先编译具有更高数字优先级的指令。

ngSwitch executes at priority 1200 while ngRepeat executes at priority 1000, which isn't the order you need.

ngSwitch以优先级1200执行,而ngRepeat以优先级1000执行,这不是您需要的顺序。

You'll have to use a nested component (a div for example):

你必须使用嵌套组件(例如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>

Don't forget to switch on message.printOnlyFirst rather than printOnlyFirst.

不要忘记打开message.printOnlyFirst而不是printOnlyFirst。

#1