Question

在angular.js 1.x的以下代码中，我需要创建一个仪表板数据集，每隔几秒钟调用一次并更新dom。然而，由于我认为$scope.DOMdataArray = []

，它正在闪烁

我已经尝试track by $index，但没有帮助。有没有办法解决这个问题或编写代码，使得ng-repeat生成的DOM不会闪烁？

function someDataInterval () {
    $scope.DOMdataArray = []
    _.map(urlsArray,function(url) {
        $http.get(url).then(function(res) {
           // some work on response 
           $scope.DOMdataArray.push(/*some data for ng-repeat*/)
        }) 
    })
}
someDataInterval ()
setInterval(someDataInterval,5000)

Answer 1

你试过这个吗？

            function someDataInterval () {
                _.map(urlsArray,function(url) {
                    $http.get(url).then(function(res) {
                       // some work on response 
                       $scope.DOMdataArray = [];
                       $scope.DOMdataArray.push(/*some data for ng-repeat*/)
                    }) 
                })
            }
            someDataInterval ()
            setInterval(someDataInterval,5000)

如果这不起作用，您可以始终使用小的加载图标，以便不会看到闪烁。使用ng-show显示列表。

            function someDataInterval () {
                $scope.loading = true;
                _.map(urlsArray,function(url) {
                    $http.get(url).then(function(res) {
                       // some work on response 
                       $scope.DOMdataArray = [];
                       $scope.DOMdataArray.push(/*some data for ng-repeat*/)
                       $scope.loading = false;
                    }) 
                })
            }
            someDataInterval ()
            setInterval(someDataInterval,5000)

和HTML：

      <h1 ng-show="!loading" ng-repeat="x in DOMdataArray">{{x.name}}</h1>
      <img ng-show="loading" src="img/image-loading.gif" />

ng-repeat闪烁更新实时数据

1 个答案: