How do you create complex AngularJS data bindings from Firebase? - angularjs

Question

I working on a basic AngularJS application with a Firebase backend. Part of the database looks like...
Student
- FirstName
- LastName
- Schedule
-- Course1
-- Course2...
I have a page displaying an html table of students with ng-repeat. Here's the code for my table...
<table>
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Youth/Adult</th>
<th>Courses Selected?</th>
<th>...</th>
</thead>
<tbody>
<tr ng-repeat="(id, student) in students">
<td>{{ student.firstName }}</td>
<td>{{ student.lastName }}</td>
<td>{{ student.type }}</td>
<td>{{ student.hasSelectedCourses }}</td>
<td>...</td>
</tr>
</tbody>
The controller connecting the data and table together is really straight forward. It's just grabbing the array of students from Firebase and chucking it into $scope.
$scope.students = Students;
I'm getting students' first and last names, so I know the repeat is working in general. But I'm having difficulty with one particular column I'd like to display - the Courses Selected? column. I'd like to intelligently fill that with a boolean (probably an icon or something) based on the existance of the Schedule hanging off the Student in the database. I thought of adding something like this to my controller (don't laugh - still learning JavaScript). This didn't work. The error was that "student" was undefined.
$scope.student.hasSelectedCourses = !($scope.student.schedule === null);
I think I could do this another way where I actually store hasSelectedCourses as a boolean in the database, but I'm concerned about the integrity of that field and getting into a situation where a student's selected courses and that field are not in sync with each other.
Is there a way to accomplish this with a bit of logic rather than data storage or is storing this in the database the way to go?

Answer 1

Assuming student.schedule is null if no courses selected (which is the normal pattern with firebase):
<tbody>
<tr ng-repeat="(id, student) in students">
<td>{{ student.firstName }}</td>
<td>{{ student.lastName }}</td>
<td>{{ student.type }}</td>
<td>
<span ng-if="student.schedule">Yes<span>
<span ng-if="!student.schedule">No<span> <!-- these spans could be icons or whatever you want -->
</td>
<td>...</td>
</tr>
</tbody>
Alternatively
<td>
{{student.schedule ? 'Yes' : 'No'}}
</td>
A side note: if you aren't already it's well worth it to include AngularFire with your app. The live 3-way binding is a good way to impress.