0

I'm having some difficulty getting items to display inside this grid when getting them from Firebase. I managed to get it working with a custom Service that returned a static array.

I know the data is reaching the browser because I can log it out as JSON like so.

<pre>
{{ data | json }}
</pre>

HTML

<ul class="dynamic-grid" angular-grid="pics" grid-width="300" gutter-size="10" angular-grid-id="gallery" refresh-on-img-load="false" >
     <li data-ng-repeat="item in data" class="grid">
         <img src="{{item.url}}" class="grid-img" data-actual-width = "{{item.width}}"  data-actual-height="{{item.height}}" />
     </li>
 </ul>

However, the items do not appear in the view, or should I say they are there but Angular-Grid and its CSS is not working as it does with the static array. Here is the main part of the code.

Controller

var list = iService.getItems().$loaded()
  .then(function(list) {
    var cnt = list.length;
    //console.log("cnt ", cnt);

    angular.forEach(list,function(image,index){
      //console.log('Item: ', list[index]);

      var imageTemp = new Image();
      imageTemp.onload = function(){
        list[index].height = this.height + 'px';
        list[index].width = this.height + 'px';

      };
      imageTemp.src = image.url;

      cnt--
      // test to see if all items have been iterated before setting $scope.data 
      if(!cnt){
        console.log("done....", cnt);
        console.log("ere ", list);
        $scope.data = list;
      } else {
        console.log("Current cnt ", cnt);
      }

    });

Nothing displays, despite the JSON still appearing. Incidentally, the Angular-Grid class .grid-img has opacity:0 and visibility:hidden that when deactivated in dev tools show the items from Firebase but without the Angular-Grid resizing/styling.

It's probably not the best way to achieve it but I'm experimenting and feel the data coming from Firebase instead of a static array shouldn't make a difference. Anyone know what could be going wrong here? All help appreciated.Thanks!

AL.
  • 36,815
  • 10
  • 142
  • 281
mikeym
  • 5,705
  • 8
  • 42
  • 62
  • why do you create `imageTemp` but not use it or am I missing something ? – Searching Dec 12 '16 at 03:19
  • @Searching Angular-Grid, like Masonry, needs the dimensions of each image before it can determine the correct layout. The Firebase objects have an image URL but the dimensions of each image are not known beforehand. Therefore I decided to create a temporary image object to obtain and store each image's dimensions it's respective list object inside the `forEach` before adding the entire list array to the `$scope.list`. Again this might not be the best approach but it seems to work fine when I use a static array. Hope that makes sense. – mikeym Dec 12 '16 at 14:56

1 Answers1

1

The example in the documentation uses angular-grid="pics" in the ul attributes and $scope.pics=... in the controller.

angular-grid="pics" defines the model you want to listen

But you're setting $scope.data. Does that make any difference?

Lesley
  • 1,395
  • 12
  • 11
  • That fixed it!! I assumed that attribute was some kind of internal setting for Angular-Grid. DUH! Very well spotted. Thank you very much! – mikeym Dec 12 '16 at 17:13
  • No problem :) It's always the little things that are hardest to spot! – Lesley Dec 12 '16 at 17:29