How to reverse the display order of my tasks in angularJS?

Question

I have a to do list with tasks. Once new tasks are created with my todoController, they are displayed in order from oldest to latest. However, I want the latest task to be displayed on top. How do I go about it ?

Here is my todoController:

facebookExample.controller('todoController', ['$scope', function($scope,   PaypalService) {
// Initialize the todo list array
//if local storage is null save the todolist to local storage
$scope.todoList = [];
$scope.DoRequested = [];
scope.FundingProcess = [];

if (localStorage.getItem("mytodos") === null)
{
localStorage.setItem("mytodos", angular.toJson($scope.todoList));
}else
{
//set the todolist from local storage
$scope.todoList = angular.fromJson(localStorage.getItem("mytodos"));
}

// Add an item function
$scope.todoAdd = function(){

//check to see if text has been entered, if not exit
if ($scope.todoInput === null || $scope.todoInput === ''){ return; }

//if there is text add it to the array
$scope.todoList.push({todoText:$scope.todoInput, 
  todoAdmin:'' , doRequested: '', beingFunded: '', 
   adminAprovedRequest:false, currentFund: 0, userAproved: false, user_email:'' , userdidWork: "false", adminCheckedWork: "false",
     done:false});

//clear the textbox
$scope.todoInput = "";

//resave the list to localstorage
localStorage.setItem("mytodos", angular.toJson($scope.todoList));
};
//Do button
$scope.do = function(x){
$scope.DoRequested.push(x);
// Send email notifier to admin 
/*
$.ajax({
type: “POST”,
url: 'https://mandrillapp.com/api/1.0/messages/send.json',
data: {
‘key’: ‘n3ZIdxXIRIZbvUWw6Z34wA’,
‘message’: {
  ‘from_email’: ‘noreply@you-serve.org’,
  ‘to’: [
      {
        ‘email’: ‘RECIPIENT_NO_1@EMAIL.HERE’,
        ‘name’: ‘RECIPIENT NAME (OPTIONAL)’,
        ‘type’: ‘to’
      },
      {
        ‘email’: ‘RECIPIENT_NO_2@EMAIL.HERE’,
        ‘name’: ‘ANOTHER RECIPIENT NAME (OPTIONAL)’,
        ‘type’: ‘to’
      }
    ],
  ‘autotext’: ‘true’,
  ‘subject’: ‘NEW TASK ASSIGNMENT REQUEST!’,
  ‘html’: ‘<div!’
}
}
}).done(function(response) {
console.log(response); // if you're into that sorta thing
});
*/
};
$scope.fund = function(x){
//$scope.FundingProcess.push(x);
PaypalService.initPaymentUI().then(

   function(){
       PaypalService.makePayment($scope.donationAmount, "Task Funding").then(
           function(data){
               if(data.response.state === "approved"){
                   alert("Successful transaction !");
               }

               else{
                   alert("Error !");
               }
           }

           );
   }     
   );  
};

$scope.remove = function() {
//copy list
var oldList = $scope.todoList;
//clear list
$scope.todoList = [];
//cycle through list
angular.forEach(oldList, function(x) {
  //add any non-done items to todo list
    if (!x.done) $scope.todoList.push(x);
});
//update local storage
 localStorage.setItem("mytodos", angular.toJson($scope.todoList));
};
//The Update function
//This waits 100ms to store the data in local storage
$scope.update = function() {
//update local storage 100 ms after the checkbox is clicked to allow it to process
setTimeout(function(){
localStorage.setItem("mytodos", angular.toJson($scope.todoList));
},100);
};
}]);

And here is my view:

    <div ng-app="facebookExample" view-title="Tasks">
<div ng-controller="todoController">
<h1>Tasks</h1>

 <div class="item item-input-inset">
 <label class="item-input-wrapper">
 <!-- The actual input tag which is bound to the todoInput using ng-model -->
 <input type="text" placeholder="Add New Item" ng-model="todoInput" size="100"> 
 </label>
 <!-- Our button thay will call our funtion to add a new todo item -->
<button class="button button-small" ng-click="todoAdd()">
Add Task
</button>
</div>

  <div ng-repeat="x in todoList">
  <li class="item item-checkbox">
  &nbsp;&nbsp;&nbsp;<label class="checkbox">
  </label>
  <!-- this is the checkbox element, you will see it is bound to the done setting in the items array -->
  <!-- When clicked it calls the update function to update the item to its done status -->
  <input type="checkbox" ng-model="x.done" ng-click="update()"/>
  <!-- this is a span tag that shows the item text, I am using ng-bind, instead of the span tag we could have used {{x.todoText}} as well -->
  <button class="fund-button" style= "float: left;" ng-click="fund(x)">Fund</button>
  <span>{{x.todoText}}</span>
  <button class="doButton" style= "float: right; margin-right: 2px;" ng-click="do(x)">Do</button>
  </li>
  </div>
  <!-- the remove button will call the remove function and remoave all items that   are marked done -->
  <button class="button button-block button-assertive" ng-click="remove()">Remove Checked Tasks
  </button>
  </div>
   </div>

Which property of your todo is primary key ? – Anik Islam Abhi Dec 23 '15 at 02:29 — Anik Islam Abhi, Dec 23 '15 at 02:29
I am not using a db, it s a mobile app – codigomonstruo Dec 23 '15 at 02:45 — codigomonstruo, Dec 23 '15 at 02:45

score 1 · Answer 1 · answered Dec 23 '15 at 02:35

1

Either splice your item to the start of the list

eg. arr.splice(0, 0, item) instead of arr.push(item)

Or use an angular filter (it provides one out of the box called reverse)

https://docs.angularjs.org/api/ng/filter/orderBy

answered Dec 23 '15 at 02:35

Matt Searles

2,656
2
16
18

2

There's also the `unshift()` method of Array, which adds items to the beginning of the array :) – Sunil D. Dec 23 '15 at 02:37

Brian Baker · Answer 2 · 2015-12-23T03:17:12.067

0

This is the easiest way to display them newest to oldest. If you need me to show more code I can.

<div ng-repeat="x in todoList|  orderBy:'-time'">

Edit: Here is a plnkr for more clarification. You need to add a time property to your todoList entries.

edited Dec 23 '15 at 03:17

answered Dec 23 '15 at 02:50

Brian Baker

986
1
6
17

How to reverse the display order of my tasks in angularJS?

2 Answers2