0
votes

I'm trying to create a page that will display a bunch of information about a certain music piece, but I only want to view one music piece per page. I've used ng-repeat to create a view of all the Music Pieces, but now I want to click on one of those pieces and display all of it's unique content on a different page. The problem is, everything I try to do I cannot grab anything deeper down in my data structure. It's currently organized like this:

MusicDB
    concertBand {
        uniqueIDFireBaseGenerates {
             name: "piece1"
             composer1: "name1"
             composer2: "name2"
             ...
        }
    }
    marchingBand {
        uniqueIDFireBaseGenerates {
             name: "piece1"
             composer1: "name1"
             composer2: "name2"
             ...
        }
    }

I can grab all the first level fine, but then when it comes time to use data that is specific for just one of the pieces I've had no success.

I have a route setup to go to a specific piece when the user clicks on it. All of that works fine. I'm just not sure how to grab the data for the specific item.

To me it seems like I should be able to just use something like {{marching.$id.name}}, but that hasn't worked (and probably isn't supposed to work that way). Anyways here is my code now.

music.js

    myApp.controller('MusicController', 
    ['$scope', '$rootScope', '$firebaseAuth', '$firebaseArray','$routeParams','FIREBASE_URL',
    function($scope, $rootScope, $firebaseAuth, $firebaseArray, $routeParams, FIREBASE_URL) {

        $scope.whichmarch = $routeParams.marchingId;
        $scope.whichconcert = $routeParams.concertId;

        var marchRef = new Firebase(FIREBASE_URL + '/marchingBand');
        var marchInfo = $firebaseArray(marchRef);
        $scope.march = marchInfo;

        var concertRef = new Firebase(FIREBASE_URL + '/concertBand');
        var concertInfo = $firebaseArray(concertRef);
        $scope.concerts = concertInfo;

        var marchView = new Firebase(FIREBASE_URL + '/marchingBand/' + $scope.whichmarch);
        var marchViewOne = $firebaseArray(marchView);
        $scope.marchCurrent = marchViewOne;

viewMarch.html

<div class="card cf">

  <div class="textintro" ng-repeat="march in march">
    <h1>{{march.$id.name}} Marching View Page</h1>
  </div><!-- textintro -->
  </div>

I know I'm missing something obvious, I've gone through documentation online and a lot of forum posts, but something is just not connecting for me (in my brain that is).

I've also used "marchCurrent" which is currently in my music.js file. I could probably not be calling it right, if it is correct.

1

1 Answers

0
votes

Well, I made my data go one more layer deep and store unique values for each piece in that one layer. Now I can use an ng-repeat to grab that one set of values for each unique piece. I feel like there is another way to do this, but this works for what I need to do!