How to sort an array dynamically with JS Angular?

Navigation
2

I have a list of tasks. The list starts with uncompleted tasks (task.done == false) for first followed by completed tasks. However, when I select a task and hide it as completed (task.done == true), I would like the list to be dynamically ordered and this task would be at the end of the list. Below is the example of my view controller. 

app.controller ('crtl', function ($scope) {

 $scope.tasks = [
     { "task":"task1", "done": false}, 
     { "task":"task2", "done": true}, 
     { "task":"task3", "done": false}
 ];

 $scope.tasks.sort(order);


 function order (x, y) {
    return (x.done === y.done)? 0 : x? 1 : -1;
 };

 $scope.setDone = function (task) {
  task.done = true;

  //Como ordernar a lista dinamicamente ao alterar o booleano?
  //Esta maneira não funciona
  $scope.tasks.sort(order);

 };

});
    
asked by anonymous 29.10.2015 / 18:03

4 answers

3

There is a shorthand for $FilterProvider that you can use: 

$scope.variavel = $filter('orderBy')([colecao], '[propriedade]');

Applying to your case: 

$scope.tasks = $filter('orderBy')($scope.tasks, 'done');

Bonus - If you want to filter only those cases where done=true ; 

$scope.doneTasks = $filter('filter')($scope.tasks,{'done': true});

Functional example below: 

function SampleController($scope, $filter) {
  $scope.tasks = [
    { "task":"task1", "done": false}, 
    { "task":"task2", "done": true}, 
    { "task":"task3", "done": false}
  ];

  $scope.orderedTasks = $filter('orderBy')($scope.tasks, 'done', true);

  $scope.doneTasks = $filter('filter')($scope.tasks,{'done': true});

}
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script></head><body><divng-controller="SampleController">

      Ordered tasks:
      <table>
        <tr>
          <td>Task</td>
          <td>Done</td>
        </tr>
        <tr ng-repeat='i in orderedTasks'>
          <td>{{i.task}}</td>
          <td>{{i.done}}</td>
        </tr>
      </table>
      <br/><br/>
      Done tasks:
      <table>
        <tr>
          <td>Task</td>
          <td>Done</td>
        </tr>
        <tr ng-repeat='i in doneTasks'>
          <td>{{i.task}}</td>
          <td>{{i.done}}</td>
        </tr>
      </table>

      
    </div>
  </body>
</html>
    
29.10.2015 / 18:29
3

If it is a array/lista , you can use filter . Example: 

$scope.tasks.filter(function(){
    return  //sua condição
})

Documentation

    
29.10.2015 / 18:09
0

In angularjs: {{orderBy_expression | orderBy: expression: reverse}}

In javascript: $ filter ('orderBy') (array, expression, reverse)

Follow the link of the documentation written in English but with the help of google translator it will be easy to understand.

link

Example

link

    
29.10.2015 / 18:31
0

Use the JS orderBY Angle filter:

In the control, create an order filter: 

$scope.sortTasks = function(elem)
{
   switch (elem.done) {
     case false: return 1; break;
     case true:  return 2; break;
   }
}

And in the view, use it in orderBy: 

 <tr ng-repeat='val in tasks | orderBy:sortTasks'>
          <td>{{val.task}}</td>
          <td>{{val.done}}</td>
 </tr>

If you make a point of ordering within the controller, you can do so. However you need to change the filter to | orderBy:order and when doing ng-repeat, use the object taskOrdered : 

$scope.taskOrdered = [];

 for (var i in $scope.tasks) {
      $scope.tasks[i].order = $scope.sortTasks($scope.tasks[i]);
      $scope.taskOrdered.push($scope.tasks[i]);
 }

Click here for more information on the sort filter: / p>     

29.10.2015 / 20:53
How to deserialize JSON with C # How to click and descend a hidden part?