2

Tenho uma lista de tasks. A lista inicia com as tasks não concluídas (task.done == false) por primeiro seguido das tasks concluídas. Entretanto quando seleciono uma task e seto a mesma como concluída (task.done==true), gostaria que a lista se ordenasse dinamicamente e esta task fosse para o final da lista. Abaixo o exemplo do meu controller da view.

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);

 };

});

4 Respostas 4

3

Existe um shorthand para o $FilterProvider que você pode utilizar:

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

Aplicando ao seu caso:

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

Bonus - Caso você queira filtrar apenas os casos onde done=true;

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

Exemplo funcional a seguir:

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>
    <div ng-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>

3

Se se tratar de uma array/lista, você pode usar o filter. Exemplo:

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

Documentação

0

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

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

Segue link da documentação escrita em inglês mas com ajuda do google translator será de fácil entendimento.

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

Exemplo

http://plnkr.co/edit/TfDeOZF4YjezIbJlG0uF?p=preview

0

Use o filtro do Angular JS orderBY :

No controle, crie um filtro de ordem:

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

E na view, use-o no orderBy:

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

Se fizer questão de ordenar dentro do controller, pode fazer assim. Porém é preciso mudar o filtro para | orderBy:order e ao fazer o ng-repeat, use o objeto taskOrdered:

$scope.taskOrdered = [];

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

Clique aqui para obter mais informações do filtro de ordenação:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .