Tri déroulant par ordre alphabétique dans AngularJS

158

Je remplis une liste déroulante via l'utilisation de ng-options qui est accroché à un contrôleur qui à son tour appelle un service. Malheureusement, les données qui arrivent sont en désordre et je dois être en mesure de les trier par ordre alphabétique.

Vous pensez que quelque chose comme le $.sortByferait, mais malheureusement, il n'a pas fait jack. Je sais que je peux le trier via javascript avec une méthode d'aide function asc(a,b)ou quelque chose comme ça, mais je refuse de croire qu'il n'y a pas de moyen plus propre de faire cela et je ne veux pas gonfler le contrôleur avec des méthodes d'assistance. C'est quelque chose de si basique en principe, donc je ne comprends pas pourquoi AngularJS ne l'a pas.

Y a-t-il un moyen de faire quelque chose comme $orderBy('asc')?

Exemple:

<select ng-option="items in item.$orderBy('asc')"></select>

Il serait extrêmement utile d'avoir des options pour orderByque vous puissiez faire ce que vous voulez, chaque fois que vous essayez habituellement de trier les données.

angularjs

— J Castillo
source

342

Angular a un filtre orderBy qui peut être utilisé comme ceci:

<select ng-model="selected" ng-options="f.name for f in friends | orderBy:'name'"></select>

Voir ce violon pour un exemple.

Il convient de noter que s'il track byest utilisé, il doit apparaître après le orderByfiltre, comme ceci:

<select ng-model="selected" ng-options="f.name for f in friends | orderBy:'name' track by f.id"></select>

— Gloopy
source

1

En regardant le violon (ou en ajoutant une balise de sélection de tri au didacticiel Angular ToDo), obtenir une option pour afficher comme `` sélectionné '' - ou même obtenir la première option à afficher - est un problème. Avec Angular, c'est vide?

— Dave Everitt

2

@DaveEveritt une façon de définir une valeur par défaut (et de supprimer l'élément vide) consiste à présélectionner un élément lié pour selected. Pour cet exemple, vous pouvez faire quelque chose comme $scope.selected = $scope.friends[0]. Voir ce violon pour un exemple de travail.

— Gloopy

Que faire si je veux l'âge comme valeur dans selected, pas tout l'élément JSON?

— Rishi

@Rishi essayez ceci pour les ng-options: f.age as f.name for f in friends | orderBy:'name'- voici un violon fonctionnel. Plus d'informations sur les ng-options ici .

— Gloopy

7

@Gloopy, Cette réponse m'a amené à 90% du chemin. Cela vous dérangerait-il d'ajouter un cas pour l'utilisation de la fonction Track by? <select ng-model="selected" ng-options="f.name for f in friends | orderBy:'name' track by f.id"></selected>. Mettre track byaprès le filtre de commande n'était pas intuitif et cette réponse est le meilleur résultat de recherche de Google.

— MushinNoShin

26

Vous devriez pouvoir utiliser le filtre: orderBy

orderBypeut accepter une troisième option pour le reversedrapeau.

<select ng-option="item.name for item in items | orderBy:'name':true"></select>

Ici, l'élément est trié par propriété «nom» dans un ordre inversé. Le 2ème argument peut être n'importe quelle fonction d'ordre, vous pouvez donc trier n'importe quelle règle.

@see http://docs.angularjs.org/api/ng.filter:orderBy

— Tosh
source

6

Ou simplement <select ng-option = "item.name pour l'élément dans les articles | orderBy: '- name'"> </select> Fonctionne aussi :)

— Mahbub

2

var module = angular.module("example", []);

module.controller("orderByController", function ($scope) {
    $scope.orderByValue = function (value) {
        return value;
    };

    $scope.items = ["c", "b", "a"];
    $scope.objList = [
        {
            "name": "c"
        }, {
            "name": "b"
        }, {
            "name": "a"
        }];
        $scope.item = "b";
    });

http://jsfiddle.net/Nfv42/65/

— Technocrate
source

2

Un peu de texte expliquant comment cela répond à la question du PO et / ou comment vous l'utiliseriez serait très utile ici.

— Sean the Bean

@SeantheBean j'ai déjà donné une démo de violon donc je n'ai pas donné d'explication.

— TechnoCrat

2

@TechnoCrat Une explication serait de toute façon préférable. En fait, il serait particulièrement intéressant de savoir pourquoi cette solution serait préférée à celles publiées des années plus tôt. Ou, comment ça diffère du tout ...

— Chipowski

@Chipowski ok. à l'avenir, je vais essayer de donner des explications avec réponse.

— TechnoCrat

0

Pour tous ceux qui souhaitent trier la variable dans la troisième couche:

<select ng-option="friend.pet.name for friend in friends"></select>

tu peux le faire comme ça

<select ng-option="friend.pet.name for friend in friends | orderBy: 'pet.name'"></select>

— Trieu Nguyen
source