List items with live progress

1

Hello Experts,

so I have a list of books (items), each item(book) has a button for the user to download the book, what I want to do is to allow the user to know the progress of downloading the book he requested, the user can download multiple books in the same time.

my issue is how to bind the download progress for each item, if I bind to variable it will update all the items progress.

<ion-list>
  <ion-item ng-repeat="book in booksList" class="item-button-right" todo="id installed name description version">
    <button download-library class="button  button-clear button-clear ion-ios-trash"></button>
    <b>{{book.name}}</b> - {{book.description}}
    <div class="progressBarDiv" id="progressBar{{book.id}}"><progress max="100" value="{{downloadProgress}}"></progress></div>
  </ion-item>
 </ion-list>

this is not working with me

.directive("downloadLibrary",function(){
  return{
      restrict: 'A',
      link: function($scope , element){
         element.bind("click", function(e){
            $scope.downloadProgress=30;
         });
      }
  }

any idea?

Thanks

2

Does this have to be a directive?

Just implement as a controller on the ion-item and then use ng-click to update the downloadProgress and bind to downloadProgress as you are doing.

Not sure why you’re trying to implement as a custom attribute directive but i wouldn’t start messing around with directives until you’ve got a very good grasp on the rest of angularjs.

3

Actually I thought it has to be a directive.

I tryed to do it in the controller but I got the same issue, it will update all the progress bars with the same value

myapp.controller('LibraryCtrl', function($scope,$http, $ionicLoading) {
  $scope.downloadBook = function(id,$cordovaFileTransfer,$cordovaFile) {
    var progressBarDiv = angular.element(document.getElementById('progressBar'+id));
    progressBarDiv.removeClass('hide');
    $scope.downloadProgress=30;
}
});

could you please let me know how to do it with controller?

4

What if you were adding downloadProgress property to book?

5

so just have something like this…

<ion-item ng-controller="LibraryCtrl"....
    <button ng-click="downloadBook(book)"....

But mainly you need to revise the core concepts of angularjs, the fact you are trying to call progressBarDiv.removeClass(‘hide’); is a big warning, i’ve got a video tutorial series you can follow.

6

Thank you very much for the tutorial, this is what I need :smile:

7

No probs, i’m going to be releasing a course soon on ionic itself, signup to the newsletter on codecraftpro.com and i’ll ping you a mail once it’s ready :slight_smile: