Do you have any thoughts on how to accomplish this task?
Currently, I have set up one controller where if you click on an element, an animation appears above. However, my goal is to have the first element automatically active/clicked as soon as the page loads...
Check out some of the code below:
Animation Displayed here:
<div class="animation">
<div ng-repeat="theme in themes" ng-show="isActive($index);" ng-if="isActive($index);">
<img id="id_{{ theme.animation_id }}" ng-src="{{ theme.animation_gif_url }}" class="active" />
</div>
</div>
Choose Animation Here:
<div class="theme-select animated fadeInUp">
<div class="theme-container" ng-repeat="theme in themes" ng-click="showAnimation($index);">
<div id="theme_{{ theme.animation_id }}" class="theme">
<img ng-src="{{ theme.icon_url }}" />
<div class="name">
{{ theme.name }}
</div>
</div>
</div>
</div>
This is My Controller Setup:
themeFunction(function(themeData) {
name = [];
themeID = [];
animationURL = [];
var themes = $scope.themes = themeData.themes;
for (var t = 0; t < themes.length; t++) {
animationURL = themes[t].animation_url;
themeID = themes[t].animation_id;
iconURL = themes[t].icon_url;
name = themes[t].name;
animationGifUrl = themes[t].animation_gif_url;
$scope.themeID = themeID;
if ($scope.themes[t].animation_gif_url == 'NULL' || $scope.themes[t].animation_gif_url == null || $scope.themes[t].animation_gif_url == '.gif') {
// console.log(name + " are null or weird");
$scope.themes[t].animation_gif_url = iconURL;
} else {
$scope.themes[t].animation_gif_url = animationGifUrl;
}
}
$scope._Index = 0;
$scope.isActive = function(index) {
return $scope._Index === index;
};
$scope.showAnimation = function(index) {
selectedTheme = $(this).attr('theme');
console.log('Selected ' + selectedTheme.animation_id);
$scope._Index = index;
};
});