Я использую ng-repeat для перечисления всех «зон». Он отлично работает при первом рендеринге, и даже когда к существующим данным добавляются дополнительные данные с сервера, он работает без каких-либо проблем или мерцаний. Но когда «$ rootScope.zones» присваивается новое значение (пользователь может изменить порядок сортировки с алфавитного на близкий, что устанавливает новое значение для $rootScope.zones в этом порядке сортировки), весь список ng-repeat на несколько секунд становится пустым, а затем снова работает нормально. Это не очень большая проблема, за исключением зон, в которых у меня есть текст с пузырьками CSS. Текст исчезает, но пузырьки остаются.

Как я могу установить $rootScope.zones таким образом, чтобы он не создавал этого мерцания? В качестве альтернативы, как я могу убедиться, что «пузырьки» появляются только при наличии текста.

Это мой ng-repeat:

 <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 секунд, а затем отображать шаблон.
Я был бы действительно признателен за вашу помощь.

Вместо использования 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);
};
  

Для получения дополнительной информации см.

• Ссылка на API фильтра AngularJS

Изменение zone.Lineup.FreeList.length != 0 на zone.Lineup.FreeList.length > 0 решило проблему пузырьков.