DustinRW DustinRW - 3 months ago 30
AngularJS Question

ng-repeat not copying correctly over

I have

ng-repeat
working within a different template, however, I can not get my
album.html
template to display content. Here is what I have.

app.js

...
.state('album', {
url: '/album',
controller: 'AlbumCtrl as album',
templateUrl: '/templates/album.html'
})
...


AlbumCtrl.js

(function() {

function AlbumCtrl() {
this.albumData = angular.copy(albumPicasso);
};

angular
.module('blocJams')
.controller('AlbumCtrl', AlbumCtrl);

})();


fixture.js (where my object I want to copy lives)

var albumPicasso = {
title: 'The Colors',
artist: 'Pablo Picasso',
label: 'Cubism',
year: '1881',
albumArtUrl: 'assets/images/album_covers/01.png',
songs: [
{ title: 'Blue', duration: 161.71, audioUrl: 'assets/music/bloc_jams_music/blue' },
{ title: 'Green', duration: 103.96, audioUrl: 'assets/music/bloc_jams_music/green' },
{ title: 'Red', duration: 268.45, audioUrl: 'assets/music/bloc_jams_music/red' },
{ title: 'Pink', duration: 153.14, audioUrl: 'assets/music/bloc_jams_music/pink' },
{ title: 'Magenta', duration: 374.22, audioUrl: 'assets/music/bloc_jams_music/magenta' }
]
};


albumt.html (here is my template with
ng-repeat
)

<main class="album-view container narrow">
<section class="clearfix">
<div class="column half">
<img src="/assets/images/album_covers/01.png" class="album-cover-art">
</div>
<div class="album-view-details column half">
<h2 class="album-view-title">The Colors</h2>
<h3 class="album-view-artist">Pablo Picasso</h3>
<h5 class="album-view-release-info">1909 Spanish Records</h5>
</div>
</section>
<table class="album-view-song-list">
<tr class="album-view-song-item" ng-repeat="album in album.albumData" ng-mouseover="hovered = true" ng-mouseleave="hovered = false">
<td class="song-item-number">
<span ng-show="!playing && !hovered"></span>
<a class="album-song-button" ng-show="!playing && hovered"><span class="ion-play"></span></a>
<a class="album-song-button" ng-show="playing"><span class="ion-paused"></span></a>
</td>
<td class="song-item-title">{{ album.songs.title }}</td>
<td class="song-item-duration">{{ album.songs.duration }}</td>
</tr>
</table>
</main>

<ng-include src="'/templates/player_bar.html'"></ng-include>


{{ album.songs.title }}
and
{{ album.songs.duration }}
isn't displaying any content nor am I receiving any errors. I personally believe I am not copying my object through my controller correctly? Further, how can I see my input of said object through my controller to test whether my object
albumPicasso
was copied correctly?

For Reference

This controller (
CollectionCtrl.js
) is working correctly and mirrors what I want to do besides the
for
loop.

(function() {

function CollectionCtrl() {
this.albums = [];
for (var i=0; i < 12; i++) {
this.albums.push(angular.copy(albumPicasso));
}
}


angular
.module('blocJams')
.controller('CollectionCtrl', CollectionCtrl);
})();

Answer

album in album.albumData
May be you want to not override album variable name?

Controller alias is just variable in scope. You are overwriting it.

It looks like:

for (var i = 0; i < album.albumData.length; i++) {
  album = album.albumData[i]; // <-- We brake all things here
}

Just rename album in ngRepeat to something like item:

ng-repeat="item in album.albumData"


Also, you want iterate a songs array, not an object:

ng-repeat="song in album.albumData.songs"

and

{{song.title}}