我想发送一个HTTP请求来获取JSON并根据它生成md-grid-list。但它似乎没有用。
我在控制器中写了那个请求。
如果我用其他普通元素(例如table和td等)替换md-grid-list,它就可以了。或者,如果我根据其他地方的JSON加载另一个普通元素,例如像{{posterPlaying.posters}}这样的纯文本,它也可以工作。
怎么回事?似乎它必须是md-grid-list的一些特殊属性。
HTML:
<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>
services.js
(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);
内部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;
});