Parsing Object In Ng-options For Angularjs Select Drop Down Using Nested Json

I have the following json: [ { 'normal' :{ 'font': 'Burlington Script.ttf', 'fontFamily': 'sf_burlington_scriptregular', 'fontName': 'Burlington Scrip

Solution 1:

You can utilize the select as part of the ng-option expression to set what you need to set the value of the ng-model when an option is selected. So fonts.normal.fontFamily as fonts.normal.fontName for fonts in designFonts and use a track by to have the option value set with respective value (track by is always applied to value).

Try:-

<selectng-model="selectedFont"ng-options="font as font.normal.fontName for font 
                   in designFonts track by font.normal.fontFamily"required></select>

Demo

If you use font.normal.fontFamily as font.normal.fontName will set ng-model with the respective fontFamily if you need the entire object as ng-model then use the way you have now.

---

Well there is a possibly ng-select bug, you cannot use select as with track by together on the same field which causes issue in selection, though ng-model gets applied. So you could use:-

ng-options="font as font.normal.fontName for font 
                   in designFonts track by font.normal.fontFamily"

But you can't

ng-options="font.normal.fontFamily as font.normal.fontName for font 
                   in designFonts track by font.normal.fontFamily"