Question

我正在使用ng-repeat循环渲染角度模板可能数千次，并想知道有条件地改变它的显示是什么是最有效的方法。例如，循环中的每个项都有一个'type'，它有一个相应的图标。有几种方法可以解决这个问题：

纯粹的css / html - 这似乎是最有效的角度方式，但在DOM中意味着更多的html

<li class="{{item.type}}">
    <i class="type-1-icon"></i>
    <i class="type-2-icon"></i>
    <i class="type-3-icon"></i>
</li>

然后在css中：

    li i { display:none; }
    li.type-1 i.type-1-icon { display:block; }
    li.type-2 i.type-2-icon { display:block; }
    li.type-3 i.type-3-icon { display:block; }

使用ng-if - 整理dom，但是对于大量记录评估ng-if可能效率较低？

<li>
    <i class="type-1-icon" ng-if="item.type == 'type-1'"></i>
    <i class="type-2-icon" ng-if="item.type == 'type-2'"></i>
    <i class="type-3-icon" ng-if="item.type == 'type-3'"></i>
</li>

使用ng-switch

<li ng-switch on="item.type">
    <i class="type-1-icon" ng-switch-when="type-1"></i>
    <i class="type-2-icon" ng-switch-when="type-2"></i>
    <i class="type-3-icon" ng-switch-when="type-3"></i>
</li>

使用ng-show（对于ng-hide同样）。类似于＃1我在猜测

<li>
    <i class="type-1-icon" ng-show="item.type == 'type-1'"></i>
    <i class="type-2-icon" ng-show="item.type == 'type-2'"></i>
    <i class="type-3-icon" ng-show="item.type == 'type-3'"></i>
</li>

无论如何，我意识到所有4种方法都可以正常工作，但我想更多地了解哪种方法最适合潜在的大型数据集以及原因。谢谢！

有条件地在ng-repeat内显示模板内容

0 个答案: