'ng-repeat'重新渲染会产生闪烁

Question

我正在使用ng-repeat列出所有"区域"。它在第一次渲染时工作得很好，即使将来自服务器的其他数据添加到现有数据中，它也可以正常工作，没有任何问题或闪烁。但是，当"$rootScope.zones"被分配一个新值时(用户可以将排序顺序从字母顺序更改为邻近，这将为$rootScope.zones设置该排序顺序的新值)，整个ng-repeat列表将空白几秒钟，然后再次正常工作。 这不是一个很大的问题，除了在我有一些带有CSS气泡的文本的区域。文本消失，但气泡仍然存在。

如何设置 $rootScope.zones 使其不会产生闪烁？或者，我如何确保"气泡"仅在文本存在时出现。

这是我的 ng 重复：

<ion-list class="card" ng-if="$root.currentMode.zoneBroadcast == true" can-swipe="true">
<div class="button-bar no-padding">
<button class="button bold" ng-class="{'button-calm': sortMethod === 'Alphabetically'}" ng-click="changeSortMethod('Alphabetically')">Alphabetically</button>
<button class="button bold" ng-class="{'button-calm': sortMethod === 'By Proximity'}" ng-click="changeSortMethod('By Proximity')">By Proximity</button>
</div>
<ion-item class="item no-border no-padding dark-bg" ng-repeat="zone in $root.zones track by zone.zoneName"
ng-if="checkVisibility(zone.zoneName)">
<div class="item-divider text-center">
<span>
Zone ID : <span>{{zone.zoneName}}</span>
</span>
</div>
<div class="item-body" ng-class="checkIfZoneMatches(zone.zoneName) ? 'zone-broadcast-green' : parseStringToInteger(zone.Trips.length) > 0 ? 'zone-broadcast-red' : checkIfZoneCanBookIn(zone.zoneName)  ? 'zone-broadcast-yellow' : zone.Lineup.FreeList.length > 0 ? 'zone-broadcast-blue' : 'zone-broadcast-normal'">
<div class="row">
<div class="col">
<span ng-class="{'lineup free' : zone.Lineup.FreeList.length != 0}">{{zone.Lineup.FreeList.toString()}}</span>
<span ng-class="{'lineup loaded' : zone.Lineup.LoadedList.length != 0}">{{zone.Lineup.LoadedList.toString()}}</span>
<span ng-class="{'lineup accepted' : zone.Lineup.AcceptedList.length != 0}">{{zone.Lineup.AcceptedList.toString()}}</span>
<span ng-class="{'lineup offered' : zone.Lineup.OfferedList.length != 0}">{{zone.Lineup.OfferedList.toString()}}</span>
<span ng-class="{'lineup break' : zone.Lineup.BreakList.length != 0}">{{zone.Lineup.BreakList.toString()}}</span>
<span ng-class="{'lineup stc' : zone.Lineup.STCList.length != 0}">{{zone.Lineup.STCList.toString()}}</span>
</div>
</div> ... 

我已经尝试过ng-if，ng-hide，track by等，但似乎没有任何效果。 这是我用来创建气泡的 CSS。

.lineup{
background: white;
border-radius: 2em;
font-weight: bold;
font-size: 100%;
padding: 1%;
}
.free {
color: #00b140;
}
.loaded{
color: #6b46e5;
}
.accepted{
color: #0a9dc7;
}
.offered{
color: deeppink;
}
.break{
color: orangered;
}
.STC{
color: saddlebrown;
}

我希望气泡仅在文本存在时才出现。此外，当用户更改排序顺序时，它不应变为空白超过 2 秒，然后呈现模板。 我真的很感激你的帮助。

Answer 1

而不是将ng-if与ng-repeat一起使用，管道连接到过滤器：

慢

<ion-item class="item no-border no-padding dark-bg"
ng-repeat="zone in $root.zones track by zone.zoneName"
ng-if="checkVisibility(zone.zoneName)">

更快

<ion-item class="item no-border no-padding dark-bg"
ng-repeat="zone in zones | filter : zoneFilter track by zone.zoneName">

$scope.zoneFilter = function(item) {
return $scope.checkVisibility(item);
};

有关详细信息，请参阅

• AngularJS 过滤器 API 参考

Answer 2

更改zone.Lineup.FreeList.length != 0zone.Lineup.FreeList.length > 0解决了泡沫问题。