Question

现在我有一个视图，在满足某些条件时使用ng-show显示select DOM对象，并为所有其他情况使用ng-show显示input DOM。当我执行此操作并在两种情况之间切换时，input框比select出现时消失的时间更长。延迟是非常明显的，所以我想改进它，以便在两个DOM更改之间几乎没有延迟。

有没有办法做到这一点？

<div>
  <input ng-show="field && (type == 'search' || fieldBucket[field].moreBuckets)"
         type="text" ng-model="value">
  <select class="facet-value"
          ng-show="field && type == 'filter' && !fieldBucket[field].moreBuckets"
          ng-model="value"
          ng-options="fieldBucket[field].buckets">
  </select>
</div>

Answer 1

我认为它无论如何都与ng-show相关或隐藏它可能取决于您期望从服务器作为响应的一些数据。我已经为你创建了一个简单的演示，在基本的ng-show / hide中，如果它们的值同时设置，则不会有任何一条腿。

$scope.getClass = function(index, isLightBullet, list) {
    var theClass = {};
    if(isLightBullet){
       if(index === 0 ){
         theClass = {'vertical-small-line-hided': true};
       }
       else{
         theClass = {'vertical-small-line': true};
       }
    return theClass;
  };

使用ngshow改进AngularJS视图更新

1 个答案: