Angularjs: как показать инкрементный счетчик (сообщение о ходе выполнения), в то время как ng-repeat работает?

ТребованиеAngularjs: как показать инкрементный счетчик (сообщение о ходе выполнения), в то время как ng-repeat работает?

Предположим, у меня есть массив 10000 длины. В то время как ng-repeat повторяет и показывает содержимое списка, между тем мне нужно показать сообщение о прогрессе, показывающее, сколько элементов создано.

Короче: показать прогресс сообщение, показывающее, насколько достигла нг-повтор

То, что я сделал

Вот код, который я сделал (не работает).

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

 
app.controller('appCtrl', function ($scope, $timeout) { 
 

 
    $scope.list = []; /// list that is going to be repeated 
 
    $scope.count = 10000; /// no of items in the list 
 

 

 
    /// filling the list 
 
    var templist = []; 
 
    for (var index = 0; index < $scope.count; index++) { 
 

 
     templist.push(index); 
 
    } 
 
    $scope.list = templist; 
 

 
    /// default msg of progress 
 
    var progress = '0/' + $scope.count; 
 

 
    /// function will be called when the the list will be getting rendered 
 
    $scope.reportProgress = function (i) { 
 
     console.log(i); 
 
     setTimeout(function() { 
 
      /// updating the progress message 
 
      progress = i + "/" + $scope.count; 
 
      $("#prog").html(progress); 
 
     }, 1); 
 
    } 
 

 
})

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div ng-app="app" ng-controller="appCtrl"> 
 

 
     progress: <span id="prog"></span> 
 

 
     <div ng-repeat="i in list track by $index"> 
 
      {{i}} {{reportProgress($index)}} 
 
      <hr/> 
 
     </div> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2016-10-17 Vikas Bansal

Можете ли вы попробовать использовать ng-bind для обновления прогресса, вместо ручной модификации DOM? И что вы имеете в виду, что он не работает? Не обновляется или вообще не обновляется? – Vamsi

Редактировать: Я создал скрипку, которая обновляет прогресс, используя ng-bind. Это ссылка - http://jsfiddle.net/Vamshhi/3mjpyq0s/ – Vamsi

@ Vamsi большое спасибо за усилия. Я запустил скрипку и обнаружил, что 'ng-repeat' закончен, но счетчик все еще показывает текущий счетчик вниз. ** Мне нужно показать прогресс ng-repeat. если ng-repeat финиширован, тогда прогресс должен показывать завершенное состояние, например. 10000/10000 ** –

В вашем HTML вы можете иметь что-то вроде этого: ng-if="showProgress(i)"

<div ng-repeat="i in list track by $index"> 
    <div ng-if="showProgressBar(i)"> 
     <!-- progress bar for each {{item}} --> 
    </div> 
</div>

В Вашей области, Вы можете передать id или другой value.

$scope.showProgressBar = function(i){ 
     $scope.list.forEach(function(item){ 
      if (item._id === i.id){ 
      item.progress = !item.progress; 
      } 
     }); 
};

источник

2016-10-17 12:52:27 Thalaivar

На самом деле, я хочу показать прогресс 'ng-repeat' –

<!--PROBLEMATIC CODE --> 

<div ng-repeat="i in list track by $index"> 
    {{i}} {{reportProgress($index)}} 
    <hr/> 
</div>

probem с этим кодом является то, что на каждый переваривать цикл, каждый элемент в списке будет сообщать о прогрессе.

Вместо этого вставьте вызов reportProgress в функцию связи по специальной директиве.

<div ng-repeat="i in list track by $index"> 
    {{i}} 
    <hr report-expn="reportProgress($index)" /> 
</div>

app.directive("reportExpn", function() { 
    return { 
     link: function(scope,elem, attrs) { 
      scope.$eval(attrs.reportExpn); 
     } 
    }; 
});

Таким образом, функция reportProgress будет вызываться только один раз в элемент списка, когда директива report-expn связана.

источник

2016-10-17 17:36:19 georgeawg

@georogeawg спасибо за ответ, но проблема все еще сохраняется. Я сделал так, как вы упомянули, но происходит то, что счетчик начинает увеличиваться после завершения 'ng-repeat' своей работы. –

может быть областью. $ EvalAsync() будет быстрее, чем область. $ Eval, поскольку предыдущий выполняется еще до того, как браузер отобразит его.Пожалуйста, поправьте меня, если я ошибаюсь – Vamsi

Angularjs: как показать инкрементный счетчик (сообщение о ходе выполнения), в то время как ng-repeat работает?

ответ

Смежные вопросы