I am trying to make an HTTP request to fetch a JSON data and then use it to dynamically generate an md-grid-list. However, I am encountering issues with this process.
The HTTP request is written in my controller.
Interestingly, if I substitute md-grid-list with other standard elements like table and td, it works perfectly fine. Similarly, if I render another standard element using the JSON elsewhere in the code, for instance a simple text like {{posterPlaying.posters}}, it also works without any problems.
Why is this happening? It seems there might be some specific characteristics of md-grid-list causing this issue.
Here is the HTML snippet:
<md-content layout="row" ng-controller="posterPlayingController as posterPlaying" id="poster-page">
<md-content layout="column" id="poster-container">
<md-grid-list
md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6"
md-row-height-gt-md="2:3" md-row-height="2:3"
md-gutter="8px" md-gutter-gt-sm="4px" >
<md-grid-tile ng-repeat="poster in posterPlaying.posters"
md-rowspan="{{poster.span.row}}"
md-colspan="{{poster.span.col}}"
md-colspan-sm="1"
ng-class="poster.background" >
<md-button aria-label="" class="poster-button" ng-click="showVote($event)">
<img src="{{poster.image}}" class="md-card-image poster-card-image" alt="Washed Out">
</md-button>
</md-grid-tile>
</md-grid-list>
</md-content>
Here is the services.js file:
(function (angular, undefined) {
"use strict";
angular
.module('services', ['ngResource'])
.factory('Poster', Poster);
Poster.$inject = ['$resource'];
function Poster($resource) {
return $resource('data/posters.json', {}, {
query: {
method: "get",
params: {},
isArray: true
}
})
}
})(angular);
Snippet from posterPlayingController:
vm.posters = Poster.query(function (response) {
var data = response.map(function (item, index, array) {
item.position = item.id % 2;
if (item.id % 5 == 0) {
item.span = {
'row': 2,
'col': 2
}
} else {
item.span = {
'row': 1,
'col': 1
}
}
return item;
});
return data;
});