DustinRW DustinRW - 1 year ago 76
AngularJS Question

ng-repeat not copying correctly over

I have

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


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


(function() {

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

.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

<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 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>
<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 class="song-item-title">{{ album.songs.title }}</td>
<td class="song-item-duration">{{ album.songs.duration }}</td>

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

{{ album.songs.title }}
{{ 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
was copied correctly?

For Reference

This controller (
) is working correctly and mirrors what I want to do besides the

(function() {

function CollectionCtrl() {
this.albums = [];
for (var i=0; i < 12; i++) {

.controller('CollectionCtrl', CollectionCtrl);

Answer Source

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"



Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download