I am currently working on an ng-repeat feature to add items from the array (album array). Everything seems to be functioning correctly. However, I also have a colors array that should assign different background-colors to the card elements of the album array. Unfortunately, the final result is not as expected. I attempted to convert the colors array into an object within the same array but still encountered issues. Any assistance would be greatly appreciated. To see the code in action, you can visit this CodePen link. The color array should cycle back around to match the number of albums in the album array.
function MainController(albumSerivce, $filter) {
'use strict';
var ctrl = this;
ctrl.albums = [];
ctrl.arrayColor = ['red', 'blue', 'green', 'yellow'];
}
.green {
background-color: rgb(75, 175, 79);
padding: 10px;
}
.red {
background-color: rgb(255, 86, 34);
padding: 10px;
}
.blue {
background-color: rgb(61, 121, 182);
padding: 10px;
}
.yellow {
background-color: rgb(255, 255, 0);
padding: 10px;
}
<body ng-app="app">
<div class="container-fluid" ng-controller="MainController as ctrl">
<div class="albums-container" ng-repeat="album in ctrl.albums" ng-cloak>
<div class="album {{color}}" ng-repeat="color in ctrl.arrayColor">
<img class="image" ng-src="{{album.url}}" alt="" />
<div class="title">{{album.title}}</div>
</div>
</div>
</div>
</body>
I have also experimented with another approach, although it didn't yield the desired outcome.
<!-- Another attempt using custom classes and ng-if statements based on modulus -->
<div ng-class="album green" ng-if="$index%">
<img class="image" ng-src="{{album.url}}" alt="" />
<div class="title">{{album.title}}</div>
</div>
<div ng-class="album red" ng-if="$index%">
<img class="image" ng-src="{{album.url}}" alt="" />
<div class="title">{{album.title}}</div>
</div>
<div ng-class="album blue" ng-if="$index%">
<img class="image" ng-src="{{album.url}}" alt="" />
<div class="title">{{album.title}}</div>
</div>
<div ng-class="album yellow" ng-if="$index%">
<img class="image" ng-src="{{album.url}}" alt="" />
<div class="title">{{album.title}}</div>
</div>