在删除旧列表之前，重新加载NG重复将呈现新列表

Question

我需要测量包含li的ul的宽度它第一次效果很好。但是，当重新加载数据时，宽度的两倍是真正的宽度，我认为这是由于呈现新的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

我找到了发生的原因，是因为我没有通过任何东西跟踪ng重复，添加=按$ index解决了问题。

在

我认为这可能是您的布局的CSS，不确定。但是我包括一支可能可以提供帮助的笔。

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>