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（＆＃39;一个＆＃39;）。为什么？

这是JSFidlle

Answer 1

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

顺便说一下，对于我来说，使用limitTo过滤器和$ interval的增量限制看起来更好的解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用$timeout或需要在$scope.$digest()结束时致电addElment。

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

Answer 3

var myApp = angular.module('myApp',[]);


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]);
        **$scope.$apply($scope.list_of_data);**
        if (i < a.length - 1)
            setTimeout(function() { addElement(i+1); }, 1000);

    }

    addElement(0);                    
};


}

以下是您的解决方案： - http://jsfiddle.net/bh9pvy04/5/

$ apply将确保所有模型都已使用新值进行更新。这将使列表更新，您将能够看到该列表中的所有组件

显示数据列表 - 逐个显示

3 个答案: