[AngularJS] ngOptions met object met array van objecten

[Timons106]

Ik ben bezig met een Docker beheer applicatie. In de applicatie moeten ook DigitalOcean Droplets aangemaakt kunnen worden.

Ik heb de volgende data die ik wil verwerken in een select dropdown:

JSON:

{
    "regions": {
        "New York": [{
            "slug": "nyc1",
            "name": "New York 1",
            "sizes": [],
            "available": false
        }, {
            "slug": "nyc2",
            "name": "New York 2",
            "sizes": ["32gb", "16gb", "2gb", "1gb", "4gb", "8gb", "512mb", "64gb", "48gb"],
            "available": false
        }],
        "Amsterdam": [{
            "slug": "ams1",
            "name": "Amsterdam 1",
            "sizes": [],
            "available": false
        }, {
            "slug": "ams2",
            "name": "New York 2",
            "sizes": ["32gb", "16gb", "2gb", "1gb", "4gb", "8gb", "512mb", "64gb", "48gb"],
            "available": true
        }]
    }
}

Ik wil de waardes groeperen per regio, vandaar de indeling van de JSON.

Wat ik geprobeerd heb:

HTML:

<select name="serverRegion" class="form-control" id="serverRegion" ng-model="serverManagementForm.serverForm.region"
                        ng-disabled="!serverManagementForm.serverOptions"
                        ng-options="value group by label for (label, value) in serverManagementForm.serverOptions.regions" required></select>

Dit geeft het volgende resultaat:


De value heeft bij het selecteren de waarde:

JSON:

[
  {
    "slug": "ams1",
    "name": "Amsterdam 1",
    "sizes": [],
    "available": false
  }
]

Nu dacht ik dat ik ngOptions ook nog wel zou kunnen loopen over de array door het volgende te doen:

code:

ng-options="(value.name for item in value) group by label for (label, value) in serverManagementForm.serverOptions.regions"

Dan krijg ik helaas de volgende foutmelding: https://docs.angularjs.org/error/$parse/ueoe?p0=(value.name.

Heeft iemand enig idee of het wel kan wat ik wil met ngOptions? Of iemand die een stomme fout ziet ergens in mijn code .

[Timons106]

Oke ik heb het over een andere boeg gegooid.

In plaats van de locaties te grouperen in een apart object heb ik nu gewoon een property toegevoegd aan alle locaties met de bijbehorende regio. Dit zorgt ervoor dat mijn ngOptions er zo uit komt te zien:

code:

ng-options="value.name group by value.group for (label, value) in serverManagementForm.serverOptions.regions"

Dit topic mag op slot .

[Caelorum]

Je had anders de select ook nog wel kunnen maken door twee ngRepeats te gebruiken

[Timons106]

Caelorum schreef op zondag 31 mei 2015 @ 15:56:
Je had anders de select ook nog wel kunnen maken door twee ngRepeats te gebruiken

Klopt, maar dat is niet de Angular way .

[Caelorum]

Tja define angular way.. Het werkt. Persoonlijk vind ik het raar dat je je datamodel hebt omgegooid om een beperking in angular te omzeilen.

[Timons106]

Caelorum schreef op zondag 31 mei 2015 @ 21:51:
Tja define angular way.. Het werkt. Persoonlijk vind ik het raar dat je je datamodel hebt omgegooid om een beperking in angular te omzeilen.

Oke, daar ben ik het wel mee eens. Maar goed, het werkt nu .

[Alex)]

Caelorum schreef op zondag 31 mei 2015 @ 15:56:
Je had anders de select ook nog wel kunnen maken door twee ngRepeats te gebruiken

Het nadeel van ngRepeat gebruiken is dat er voor ieder item in de lijst een nieuwe scope wordt aangemaakt. Dat gebruikt wat meer geheugen dan ngOptions.

Caelorum schreef op zondag 31 mei 2015 @ 21:51:
Tja define angular way.. Het werkt. Persoonlijk vind ik het raar dat je je datamodel hebt omgegooid om een beperking in angular te omzeilen.

Eigenlijk vind ik de gekozen oplossing wel een erg nette. Het object in kwestie is een serverlocatie (zoals New York 1), de geografische regio waarin deze locatie zich bevindt is een stukje beschrijvende informatie (metadata). Door de metadata op hetzelfde niveau te zetten als de rest van de informatie wordt het een stuk makkelijker om naderhand te filteren of groeperen op andere attributen, waarbij dit zinnig blijft.

Als je later bijvoorbeeld alle mega-VM's wilt kunnen zien (> 16 GB RAM) kun je makkelijk filteren op alle items uit de lijst met waardes > 16 GB in de sizes-array. De geografische locatie van de server is op dat moment dan helemaal niet zo interessant.