javascript - 显示数据列表 - 一项一项

Question

我要显示数据列表:

<li ng-repeat="d in list_of_data">
    <div class="line">
       {{ d }}
    </div>
</li>

但是我想在每行数据出现之间有一个停顿，所以我使用了这样的代码:

function MyCtrl($scope) {
    $scope.list_of_data = [];

    $scope.start = function() {
        var a = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];

        var addElement = function(i) {
            alert(i);
            $scope.list_of_data.push(a[i]);
            if (i < a.length - 1)
                setTimeout(function() { addElement(i+1); }, 1000);

        }

        addElement(0);                    
    };   
}

但是当我启动代码时，我在警告窗口中得到所有数字 (0..9)，但在页面中只有一个 DIV(“一”)。为什么？

这是一个JSFidlle

Answer 1

问题是作为 setTimeout 的第一个参数传递的函数在摘要周期之外执行并且 View 未更新。最好使用 setTimeout 函数的 $timeout 服务:

顺便说一句，对我来说，应用 limitTo 过滤器和 $interval 递增限制看起来是更好的解决方案:

angular.module('myApp', [])
  .controller('MyCtrl', function($scope, $interval) {
    $scope.list_of_data = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];

    $scope.limit = 0;

    $scope.start = function() {
      $interval(function() {
        $scope.limit += 1;
      }, 1000, $scope.list_of_data.length);
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <a href="#" ng-click="start()">press me</a> 
    <ul>
      <li ng-repeat="d in list_of_data|limitTo:limit">
        <div class="line">{{d}}</div>
      </li>
    </ul>
  </div>
</div>