Я использую следующий код для создания динамических стилей,
$scope.styles = [];
for (var i = 0; i <= 16; ++i) {
$scope.styles.push([
{
background: 'url(images/' + i + '.jpg);',
'background-size': '100% 100%;',
transition: 'all 1000ms linear 1000ms;',
'z-index': 20
},
{
background: 'url(images/' + (i * 2) + '.jpg);',
'background-size': '100% 100%;',
transition: 'all 1000ms linear 1000ms;',
'z-index': 10
}
]);
}
И часть HTML,
<div ng-repeat="i in range(16)" class="album">
<a ng-style="styles[i][0]"></a>
<a ng-style="styles[i][1]"></a>
<!-- <a class="type1"></a> -->
</div>
Однако в хроме применяется только часть z-index
, я действительно не знаю, почему,
Кто-нибудь, пожалуйста, взгляните?
Проблема решена. Это очень сложно!
Вы не можете иметь точку с запятой в стилях, например background: 'url(images/' + (i * 2) + '.jpg);',
должен быть background: 'url(images/' + (i * 2) + '.jpg)'
В противном случае угловой просто "проигнорировал" его. Не уверен, если это по дизайну или ошибка.