How do you create complex AngularJS data bindings from Firebase? -
i working on basic angularjs application firebase backend. part of database looks like...
student - firstname - lastname - schedule -- course1 -- course2...
i have page displaying html table of students ng-repeat. here's code 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 data , table straight forward. it's grabbing array of students firebase , chucking $scope.
$scope.students = students;
i'm getting students' first , last names, know repeat working in general. i'm having difficulty 1 particular column i'd display - courses selected? column. i'd intelligently fill boolean (probably icon or something) based on existance of schedule hanging off student in database. thought of adding controller (don't laugh - still learning javascript). didn't work. error "student" undefined.
$scope.student.hasselectedcourses = !($scope.student.schedule === null);
i think way store hasselectedcourses boolean in database, i'm concerned integrity of field , getting situation student's selected courses , field not in sync each other.
is there way accomplish bit of logic rather data storage or storing in database way go?
assuming student.schedule
null if no courses selected (which normal pattern 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 icons or whatever want --> </td> <td>...</td> </tr> </tbody>
alternatively
<td> {{student.schedule ? 'yes' : 'no'}} </td>
a side note: if aren't it's worth include angularfire app. live 3-way binding way impress.
Comments
Post a Comment