如何减少AngularJS中的观察者以获得具有相同条件的ng-show

发布时间：2020-12-17 17:45:59 所属栏目：安全来源：网络整理

导读：在我的 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"...data

在我的 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个观察者.它会影响性能.在这种情况下,有没有办法减少观察者的数量？

解决方法

我不确定这是否可行,但如果您使用的是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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!