Angular.js Seleccionar con ngOptions:Etiquetar el grupo de opciones
-
21-12-2019 - |
Pregunta
Recién comencé a jugar con Angular.js y tengo una pregunta sobre ngOptions:¿Es posible etiquetar el grupo de opciones?
Supongamos 2 objetos: automóviles y garajes.
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"},
...
]
Con este código obtuve casi el resultado que quiero:
ng-options = "car.id as car.name + ' (' + car.color + ')' group by car.garageId for car in cars"
Resultado en la selección:
-----------------
1
Diablo (red)
Countach (white)
Firebird (red)
2
Clio (silver)
Golf (black)
3
Hummer (silver)
-----------------
Pero quiero etiquetar los grupos de opciones como "Garaje 1", "Garaje 2",...o incluso mejor, mostrar el nombre del garaje y no solo el ID del garaje.
El documentación de angularjs.org para seleccionar no dice nada sobre las etiquetas para optgroup, pero me gustaría ampliar el grupo por parte de ngOptions como group by car.garageId as 'Garage ' + car.garageId
o group by car.garageId as getGarageName(car.garageId)
- que lamentablemente no funciona.
Mi única solución hasta ahora es agregar una nueva propiedad "garageDisplayName" a los objetos del automóvil y almacenar allí el id + nombre del garaje y usarlo como grupo por parámetro.Pero no quiero actualizar todos los autos cada vez que se cambia el nombre de un garaje.
¿Hay alguna manera de etiquetar los grupos de opciones con ngOptions o debería usar ngRepeat en ese caso?
Solución
puedes simplemente llamar getGarageName()
en el group by
sin usar un as
...
ng-options="car.id as car.name + ' (' + car.color + ')' group by getGarageName(car.garageId) for car in cars"
En lugar de almacenar la identificación del garaje en cada automóvil, es posible que desee considerar almacenar una referencia al objeto del garaje en la matriz de garajes.De esa forma podrás cambiar el nombre del taller y no será necesario cambiar cada coche.Y el group by
simplemente se convierte...
group by car.garage.name