[Angularjs] ng-repeat sans ordonner les données
J’ai récemment eu un problème tout bête avec Angularjs. J’utilise un ng-repeat sur des données pour créer un tableau, mais mes données ne sortent pas dans l’ordre dans lesquels je les aient saisis. En fait par défaut, angular tries les clés du tableau par ordre alphabétique. Voici donc la solution pour ne pas ordonnée les données lors d’un ng-repeat.
Voici le lien jsfiddle de la solution trouvé : http://jsfiddle.net/DnEXC/
Vous pouvez voir l’affichage en mode ‘non trié’ et l’affichage classique triée par clé par ordre alphabétique.
Comme je le disait précédemment, par défaut, lors d”un ng-repeat, Angularjs trie les clés des données par ordre alphabétique. Il est possible de trié différemment, mais ce n’est pas le sujet ici. Ici on ne veut pas trier les données.
Analysons le code de la solution :
|
1 2 3 4 5 6 |
<div ng-repeat="key in notSorted(data)" ng-init="value = data[key]"> <pre> key: {{key}} value: {{value}} </pre> </div> |
Le ng-repeat est différent, nous appelons la fonction ‘notSorted’ avec comme argument nos données. Ensuite nous initialisation une variable ‘value’ qui a pour valeur les valeurs de data.
Mais à quoi ça sert ? Pourquoi ne pas directement écrire <div ng-repeat=”(key, value) in data”> ?
Tous simplement parce que la fonction ‘notSorted’ va nous permettre de conserver l’ordre que l’on avait à la base.
|
1 2 3 4 5 6 |
$scope.notSorted = function(obj){ if (!obj) { return []; } return Object.keys(obj); } |
Le if retourne un tableau vide si jamais l’argument de la fonction n’est pas un tableau. Ensuite la fonction retourne un tableau ayant pour valeur les clé de notre objet. Soit dans cas ceci :
|
1 2 3 4 5 6 7 |
[ '1': 'key4', '2': 'key1', '3': 'key3', '4': 'key2', '5': 'key5' ]; |
Donc quand Angularjs va trier notre tableau par clés, par ordre alphabétique, l’ordre ne changera pas. Ensuite le ng-init permet de récupérer nos valeurs dans l’ordre de nos clés (qui est donc conservé).
Voila, j’espère avoir été claire. A bientôt.
A propos de l'autheur
Jérémy
Chef de projet informatique spécialisé dans le domaine du web depuis plusieurs années et référent technique. En veille permanente, je me tiens à jour sur les nouveautés et évolutions afin de pouvoir réfléchir aux meilleurs outils à utiliser en fonction du besoin. De nature autonome et calme, j’aime travailler avec une équipe qui sait se remettre en question et qui cherche la solution la plus adéquate en fonction du problème et des délais imparties.