CODEWITHSUNDEEP
javascriptangularjs-ng-repeatfirebase
ninjabugs
ninjabugs

Reputation: 103

Reversing ng-repeat's order, iterating over anglefire array

Being new to Angular and Firebase, naturally AngleFire is giving me troubles. I'm using ng-repeat to iterate over a synced array, and I'd like to reverse the order it's displaying. I've tried '| reverse' as well as variations of that, sorting the array on the FireBase side, and copying the array into a local only array then reversing it; among more things than I can remember at this point.

JS adding data to array

ctrl.go = function() {
  console.log(ctrl.localArray);
  ctrl.localArray.$add(
    {
      name: ctrl.name,
      content: ctrl.content,
      time: new Date().getTime(),
    }
  );
  console.log(ctrl.localArray);

HTML w/ ng-repeat

  <span ng-repeat="localArray in ctrl.localArray">
        {{localArray.content}}<br>
        <p class="right">- {{localArray.name}} at {{localArray.time | date : "MMM d, h:mm a"}}</p>
  </span>

What needs to be done to have the ng-repeat display reversed to how it is?

Solution:

<span ng-repeat="localArray in ctrl.localArray.reverse()">

Upvotes: 2

Views: 149

Answers (1)

dfsq
dfsq

Reputation: 193261

You can use Array.prototype.reverse method directly in template:

<span ng-repeat="localArray in ctrl.localArray.reverse()">
    {{localArray.content}}<br>
    <p class="right">- {{localArray.name}} at {{localArray.time | date : "MMM d, h:mm a"}}</p>
</span>

Or you can do it in controller before passing array to HTML.

Upvotes: 3

Related Questions