Question

我需要测量包含带有ng-repeat的LI的UL的宽度它第一次很棒。然而，当重新加载数据时，宽度是实际宽度的两倍，我认为这是由于在删除旧LI之前角度渲染新的LI＆＃39>

如何在渲染新的LI之前先删除旧的LI

P.S。如果我暂停1000，它就可以了，但我不想每次都等1秒。

<ul class='ul'>
     <li ng-repeat="thing in data.things" class="buyer_li" ng-init="$last && getUlWidth()">
          <p>{{thing.detail}}
     </li>
</ul>
<button ng-click="reloadData()">Reload</button>



$scope.getUlWidth = function(){

    setTimeout(function() {
        $scope.ulWidth = document.querySelector('.ul').clientWidth;

    }, 0);
}

$scope.reloadData = function(){
     //reloadDataFunc;
}

Answer 1

我找到了它发生的原因这是因为我没有通过任何方式跟踪ng-repeat，通过$ index添加一个轨道解决了这个问题。

请参阅此问题和解答Angular ng-repeat causes flickering

Answer 2

我认为它可能是你的CSS布局，不完全确定。但我包括pen可能会有所帮助。

＆＃13;

.container-fluid {
  background-color: #1D1F20;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  button {
    margin-top: 20%;
  }
}

ul li {
  list-style: none;
  margin: 10px;
}

.child-padding>div {
  padding: 2px;
}

.col-md-2 {
  position: fixed;
  button {
    margin-bottom: 10%;
  }
}

.circle-bound {
  float: left;
  text-align: center;
  border-radius: 50%;
  width: 25%;
  background-color: #0bf;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="container-fluid" ng-app="app">
  <div class="container" ng-controller="exampleController">
    <div class="row">
      <div class="col-md-2 text-center">
        <button class="btn btn-primary" type="button" ng-click="refreshList()">Refresh Comment List</button>
        <div class="circle-bound" ng-bind="listContainerWidth"></div>
      </div>
      <div class="col-md-10 pull-right">
        <ul class="ul">
          <li ng-repeat="comment in list track by $index">
            <div class="child-padding">
              <div ng-bind="comment.email"></div>
              <div ng-bind="comment.body"></div>
            </div>
            <div class="pull-right" ng-bind="comment.name"></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

＆＃13;

cur.execute('SELECT * FROM Table1 WHERE colc =(?,?,?)', valueA,ValueB,ValueC)

＆＃13;

重新加载ng-repeat会在删除旧列表之前呈现新列表

2 个答案: