更快

Question

我正在使用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秒钟内变为空白，然后呈现模板。非常感谢您的帮助。

Answer 1

改变 zone.Lineup.FreeList.length != 0至zone.Lineup.FreeList.length > 0解决了气泡问题。

Answer 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);
};

有关更多信息，请参见

AngularJS filter API Reference

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

2 个答案:

更快