AngularJS & Firebase - redraw ng-repeat on change
I have a very simple controller that syncs with my Firebase.
.controller('SchedulesCtrl', ['$scope', '$firebase',
function($scope, $firebase) {
var ref = new Firebase("https://blah.firebase.io/schedules/110/2014-10-04/1");
var sync = $firebase(ref);
$scope.schedules = sync.$asArray();
}]);
This populates my ng-repeat:
<ul>
<li ng-repeat="schedule in schedules | orderBy:'start_date_time'" class="class-current class-single scale-fade repeated-item">
<div class="col-sm-2">
<div class="class-shortname">{{schedule.class_short_name}}</div>
</div>
<div class="col-sm-10 class-name">{{schedule.class_name}}</div>
<div class="col-sm-5">
<div class="class-time">
{{schedule.start_date_time | date: "h:mma"}}-{{schedule.end_date_time | date: "h:mma"}}
</div>
</div>
<div class="col-sm-5">
<div class="class-instructor">{{schedule.staff_first_name}}</div>
<div class="class-checkedin">{{schedule.staff_last_name}}</div>
</div>
</li>
</ul>
ng-repeat uses some animation to slide across all of my classes. The data in that Firebase is then updated outside of my Angular app and the changes are reflected in the app.
They both work very well and the data is updated immediately, but I would like to have all of my ng-repeat go away and then enter when the data changes in Firebase. i.e.
- Data changes in Firebase
- The whole ng-repeat comes out with a fantasy animation
- The entire ng-repeat is re-enabled with fantastic animation - with updated data
I have data and animation pieces, but how do I tell Angular to leave and inject (these are ngAnimate methods) my ng-repeat when Firebase data changes?
source to share
You can use $watch
Firebase to track data changes.
Just wrap your ng-repeat fill code in a method $watch
:
var unwatch = obj.$watch(function() {
console.log("data changed!");
});
Assigning it to a variable if you want to free the listener later by calling unwatch()
Taken from the documentation
To assign animation through ngAnimate
to repopulate an array, you may need to check out the documentation ngAnimate
here .
source to share