0

我有一个任务清单。使用我的 todoController 创建新任务后,它们会按从最早到最新的顺序显示。但是,我希望最新的任务显示在顶部。我该怎么做?

这是我的 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);
};
}]);

这是我的观点:

    <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>
4

2 回答 2

1

将您的项目拼接到列表的开头

例如。arr.splice(0, 0, item)代替arr.push(item)

或者使用角度过滤器(它提供了一个开箱即用的方法,称为反向)

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

于 2015-12-23T02:35:05.497 回答
0

这是显示它们最新到最旧的最简单方法。如果您需要我显示更多代码,我可以。

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

编辑:是一个 plnkr 以获得更多说明。您需要将时间属性添加到您的 todoList 条目。

于 2015-12-23T02:50:32.850 回答