1

Estou tentando ordenar uma um mapa com alguns dados, mas não consigo ordenar as palavras com acentos. Elas sempre ficam por último, preciso de uma sugestão para conseguir ordenar um mapa.

Segue o código:

(function(angular) {
  'use strict';
angular.module('orderByExample', [])
  .controller('ExampleController', ['$scope', '$filter', function($scope, $filter) {
    var orderBy = $filter('orderBy');
    $scope.friends = [
      { name: 'John',    phone: '555-1212',    age: 10 },
      { name: 'Ádan',    phone: '555-9876',    age: 19 },
      { name: 'Mike',    phone: '555-4321',    age: 21 },
      { name: 'Adam',    phone: '555-5678',    age: 35 },
      { name: 'Julie',   phone: '555-8765',    age: 29 }
    ];
   
    $scope.order = function(predicate, reverse) {
      $scope.friends = orderBy($scope.friends, predicate, reverse);
    };
    $scope.order('-age',false);
  }]);
})(window.angular);
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example105-production</title>
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.0/angular.min.js"></script>
  <script src="script.js"></script>
  

  
</head>
<body ng-app="orderByExample">
  <div ng-controller="ExampleController">
  <table class="friend">
    <tr>
      <th><a href="" ng-click="reverse=false;order('name', false)">Name</a>
        (<a href="" ng-click="order('-name',false)">^</a>)</th>
      <th><a href="" ng-click="reverse=!reverse;order('phone', reverse)">Phone Number</a></th>
      <th><a href="" ng-click="reverse=!reverse;order('age',reverse)">Age</a></th>
    </tr>
    <tr ng-repeat="friend in friends">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
    </tr>
  </table>
</div>
</body>
</html>

1

2 Respostas 2

3

Você pode usar um filter customizado para ordenar. Veja o exemplo:

.filter('ordenar',function(){
    return function (items, predicate, reverse) {
        items.sort(function (a, b) {
            return a[predicate].localeCompare(b[predicate]);
        });
    return items;
};

(function(angular) {
    'use strict';
    angular.module('orderByExample', [])
    .controller('ExampleController', ['$scope', '$filter', function($scope, $filter) {
        var orderBy = $filter('orderBy');
        $scope.friends = [
            { name: 'John',    phone: '555-1212',    age: 10 },
            { name: 'Ádan',    phone: '555-9876',    age: 19 },
            { name: 'Mike',    phone: '555-4321',    age: 21 },
            { name: 'Adam',    phone: '555-5678',    age: 35 },
            { name: 'Julie',   phone: '555-8765',    age: 29 }
        ];
        
        $scope.order = function(predicate, reverse) {
            $scope.friends = $filter("ordenar")($scope.friends, predicate, reverse);
        };
      
    }]).filter('ordenar',function(){
        return function (items, predicate, reverse) {
            
            items.sort(function (a, b) {
                console.log(predicate)
                return a[predicate].localeCompare(b[predicate]);
            });
            return items;
        }; 
    })
})(window.angular);    
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example - example-example105-production</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.0/angular.min.js"></script>
    <script src="script.js"></script>
</head>
<body ng-app="orderByExample">
    <div ng-controller="ExampleController">
        <table class="friend">
            <tr>
                <th><a href="" ng-click="reverse=false;order('name', false)">Name</a>
                    (<a href="" ng-click="order('name',false)">^</a>)</th>
                    <th><a href="" ng-click="reverse=!reverse;order('phone', reverse)">Phone Number</a></th>
                    <th><a href="" ng-click="reverse=!reverse;order('age',reverse)">Age</a></th>
                </tr>
                <tr ng-repeat="friend in friends">
                    <td>{{friend.name}}</td>
                    <td>{{friend.phone}}</td>
                    <td>{{friend.age}}</td>
                </tr>
            </table>
        </div>
    </body>
</html>

1
  • Alguém pode explicar o pq fui negativado? Commented 16/10/2015 às 22:22
1

Não vou conseguir te ajudar quanto ao AngularJS, mas vou tentar te dá um exemplo que pode vir a ser útil.

Quanto você tenta ordenar um Array com nomes, realmente os nomes com accento vão para o final da lista:

var nomes = ["Adalto", "Carlos", "Ádalto", "Zuleica", "Benicio"];
var order = nomes.sort(function (nomeA, nomeB) {
  return nomeA > nomeB;
})

console.log(order);

No exemplo acima temos a seguinte saida:

Input: ["Adalto", "Carlos", "Ádalto", "Zuleica", "Benicio"]
Output: ["Adalto", "Benicio", "Carlos", "Zuleica", "Ádalto"] 

Porém podemos usar um LocaleCompare e modificar a sensibilidade para ignorar acentos.

var nomes = ["Adalto", "Carlos", "Ádalto", "Zuleica", "Benicio"];
var order = nomes.sort(function (nomeA, nomeB) {
  return nomeA.localeCompare(nomeB, "standard", { sensitivity: "base" });
})

console.log(order);

você pode setar a sensibilidade de acordo com a sua necessidade:

  1. base: case insensitive e accent insensitive;
  2. accent: case insensitive e accent sensitive;
  3. case: case sensitive e accent insensitive;
  4. variant: case sensitive e accent sensitive; default

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 .