Angular.js Sélectionnez avec ngOptions :Étiquetez le groupe opt
-
21-12-2019 - |
Question
Je viens de commencer à jouer avec Angular.js et j'ai une question sur ngOptions :Est-il possible d'étiqueter l'optgroup ?
Supposons 2 objets : les voitures et les garages.
cars = [
{"id": 1, "name": "Diablo", "color": "red", "garageId": 1},
{"id": 2, "name": "Countach", "color": "white", "garageId": 1},
{"id": 3, "name": "Clio", "color": "silver", "garageId": 2},
...
]
garages = [
{"id": 1, "name": "Super Garage Deluxe"},
{"id": 2, "name": "Toms Eastside"},
...
]
Avec ce code, j'ai obtenu à peu près le résultat souhaité :
ng-options = "car.id as car.name + ' (' + car.color + ')' group by car.garageId for car in cars"
Résultat dans la sélection :
-----------------
1
Diablo (red)
Countach (white)
Firebird (red)
2
Clio (silver)
Golf (black)
3
Hummer (silver)
-----------------
Mais je veux étiqueter les optgroups comme "Garage 1", "Garage 2", ...ou encore mieux afficher le nom du garage et pas seulement le garageId.
Le Documentation angulairejs.org pour sélectionner ne dit rien sur les étiquettes du optgroup, mais j'aimerais étendre le groupe d'une partie de ngOptions comme group by car.garageId as 'Garage ' + car.garageId
ou group by car.garageId as getGarageName(car.garageId)
- qui ne fonctionne malheureusement pas.
Ma seule solution jusqu'à présent est d'ajouter une nouvelle propriété "garageDisplayName" aux objets de voiture et d'y stocker l'identifiant + le nom du garage et de l'utiliser comme paramètre groupe par.Mais je ne souhaite pas mettre à jour toutes les voitures chaque fois que le nom d'un garage est modifié.
Existe-t-il un moyen d'étiqueter les optgroups avec ngOptions, ou dois-je utiliser ngRepeat dans ce cas ?
La solution
Tu peux simplement appeler getGarageName()
dans le group by
sans utiliser un as
...
ng-options="car.id as car.name + ' (' + car.color + ')' group by getGarageName(car.garageId) for car in cars"
Au lieu de stocker l'identifiant du garage dans chaque voiture, vous souhaiterez peut-être envisager de stocker une référence à l'objet garage dans le tableau garages.De cette façon, vous pouvez changer le nom du garage et il n'est pas nécessaire de changer chaque voiture.Et le group by
devient tout simplement...
group by car.garage.name