Olá, pessoal!

Vamos ver hoje como ordenar os dados em ordem crescente ou decrescente por coluna quando for clicado. É bem simples fazer isso.

Para separar o exemplo do artigo anterior, apenas dupliquei o filteradvance2.html e criei uma nova rota. Então, o resultado dos exemplos mostrado no artigo você deve ver no arquivo filteradvance2.html.Veja como ficou a rota:

app.js 

when("/filteradvance2", {
		templateUrl : "filteradvance2.html", 
		controller:filterController
		}).

Abra o arquivo index.html e vamos adicionar bootstrap css no head:

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">

Vamos precisar para usar um ícone na coluna.

Abra o arquivo filteradvance2.html e vamos dar continuidade. Para ordenar dados, temos o filter orderBy – no nosso caso vamos dizer que a ordenação vai acontecer com base na coluna que foi clicada. Portanto, vamos fazer isso aqui no head da coluna:

<thead>
<th ng-click="sort('name')">Name
<i ng-class="{'icon-chevron-up':isSortUp('name'),'icon-chevron-down':isSortDown('name')}"></i>
</th>
<th ng-click="sort('lastname')">Lastname
<i ng-class="{'icon-chevron-up':isSortUp('lastname'),'icon-chevron-down':isSortDown('lastname')}"></i>
</th>
<th ng-click="sort('age')">Age
<i ng-class="{'icon-chevron-up':isSortUp('age'),'icon-chevron-down':isSortDown('age')}"></i>
</th>
</thead>

Vamos entender agora. A função sort em ng-click ainda não existe e a criaremos agora. Ela basicamente recebe a propriedade que deve ser ordenada. Na tag <i /> inserimos o ícone e criamos duas funções (uma para ordem crescente e outra pra decrescente, que também vai receber a propriedade para ordenar).

Criando as funções no controller

Agora vamos dar carne ao esqueleto, criando as funções no filterController:

//restante do codigo omitido 

      $scope.sortField = undefined;
      $scope.reverse = false;

	 $scope.isSortUp = function(fieldName){
	 	return $scope.sortField === fieldName && !$scope.reverse;
	 };
	 $scope.isSortDown = function(fieldName){
	 	return $scope.sortField === fieldName && $scope.reverse;
	 };
	 //order data
	 $scope.sort = function(fieldName){
	 	if ($scope.sortField === fieldName) {
	 		$scope.reverse = !$scope.reverse;
	 	}else{
	 		$scope.sortField = fieldName;
	 		$scope.reverse = false;

	 	};
	 }

Vamos testar? Portanto vamos clicar na coluna Name da tabela e ver o acontece:

Ficou ordenado de forma crescente, agora vamos clicar novamente:

Simples, não? Vou ficando por aqui…

Abraços!