[英]Items from Firebase not displaying in Angular Grid
I'm having some difficulty getting items to display inside this grid when getting them from Firebase. 从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. 我知道数据正在到达浏览器,因为我可以像这样将其注销为JSON。
<pre>
{{ data | json }}
</pre>
HTML 的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. 但是,这些项目没有出现在视图中,或者我应该说它们在那里,但是Angular-Grid及其CSS无法像使用静态数组那样工作。 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. 尽管仍显示JSON,但没有显示任何内容。 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. 顺便说一下,Angular-Grid类
.grid-img
具有opacity:0
和visibility:hidden
.grid-img
是,在开发工具中停用该功能时,它会显示Firebase中的项目,但不会调整Angular-Grid的大小/样式。
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. 这可能不是实现此目标的最佳方法,但我正在试验,认为来自Firebase而不是静态数组的数据不会产生任何影响。 Anyone know what could be going wrong here?
有人知道这里可能出什么问题吗? All help appreciated.Thanks!
感谢所有帮助。谢谢!
The example in the documentation uses angular-grid="pics"
in the ul
attributes and $scope.pics=...
in the controller. 文档中的示例在
ul
属性中使用angular-grid="pics"
,在控制器中使用$scope.pics=...
angular-grid="pics" defines the model you want to listen
angular-grid =“ pics”定义您要收听的模型
But you're setting $scope.data
. 但是您要设置
$scope.data
。 Does that make any difference? 那有什么区别吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.