如何在相同条件下为 ng-show 减少 AngularJS 内的观察者

Question

在我的 HTML 代码中，一些 div 将以相同的条件显示。我将每个 div.

的条件设置为 ng-show

<div ng-show="sameCondition1">...data1...</div>
...something else...
<div ng-show="sameCondition1">...data2...</div>
...something else...
<div ng-show="sameCondition1">...data3...</div>

AngularJS 将为每个 ng-show 创建 3 个观察者。它会影响性能。在这种情况下，有什么办法可以减少观察者的数量吗？

Answer 1

我不确定这是否可行，但如果您使用的是 AngularJS > 1.3.x 并且您的 someCondition1 在一次迭代后没有改变，那么您可以使用Angular 通过使用 :: 注销观察者的功能，如下所示：

<div ng-show="::sameCondition1">...data1...</div>
...something else...
<div ng-show="::sameCondition1">...data2...</div>
...something else...
<div ng-show="::sameCondition1">...data3...</div>

阅读更多关于One-time binding

更新

由于您的病情会更新，所以我的上述解决方案对您不起作用。但我有一个更简洁的解决方案，可以使用 CSS 将观察者减少到 1 个。给你：

<div class="{{sameCondition1 ? '' : 'hide-similar'}}">
    <div class="similar1">...data1...</div>
    ...something else...
    <div class="similar1">...data2...</div>
    ...something else...
    <div class="similar1">...data3...</div>
</div>

现在，定义您的 CSS:

.hide-similar .similar1 {
    display: none;
}

Answer 2

您可以使用 ng-switch，但这取决于条件 - 如果您的条件取决于单个变量（示例：a==1, a==2, a==3）。它将观察者从 3 个减少到 1 个。

如何在相同条件下为 ng-show 减少 AngularJS 内的观察者

How to decrease watchers inside AngularJS for ng-show with same condition

angularjs

performance

ng-show