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

Question

我需要用 ng-repeat 测量包含 LI 的 UL 的宽度第一次效果很好。然而，当重新加载数据时，宽度是实际宽度的两倍，我相信这是由于 angular 在删除旧 LI 之前渲染新 LI

如何在渲染新的 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

我想这可能是您 CSS 的布局，不太确定。但我提供了一个可能会有所帮助的 pen。

function exampleController($scope, exampleFactory, $timeout) {
  $scope.list = [];
  $scope.listContainerWidth = '???';

  $scope.refreshList = function() {
    $scope.list = [];
    $scope.listContainerWidth = '???';
    $scope.listContainerWidth = document.querySelector('.ul').clientWidth;
    $timeout(function() {
      getList();
    }, 1000);
  };

  function getList() {
    exampleFactory
      .getList()
      .then(function(list) {
        $scope.list = list;
      });
  }

  getList();
}

function exampleFactory($http) {
  var root = 'http://jsonplaceholder.typicode.com';

  function getList() {
    return $http.get(root + '/comments')
      .then(function(resp) {
        return resp.data;
      });
  }
  return {
    getList: getList
  };
}

angular
  .module('app', [])
  .controller('exampleController', exampleController)
  .factory('exampleFactory', exampleFactory);

.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;
}

<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>

Answer 2

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

查看此问题和答案Angular ng-repeat causes flickering

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

Reloading ng-repeat renders the new list before removing the old list

javascript

angularjs

ng-repeat