CODEWITHSUNDEEP
objectng-options
Lee
Lee

Reputation: 128

Angular ng-options using object

Can anyone help me, how to show 'name' in ng-options for following structure.

"systems": {
    "android": {
      "name": "Android"
    },
    "ios": {
      "name": "iOS"
    },
    "web": {
      "name": "Web"
    }
  },

Upvotes: 1

Views: 100

Answers (1)

Vikky
Vikky

Reputation: 770

For structure:

$scope.systems =  {
    "android": {
      "name": "Android"
    },
    "ios": {
      "name": "iOS"
    },
    "web": {
      "name": "Web"
    }
  };

you can do it like this: 

 <select ng-model='system' ng-options='key.name as value.name for (key, value) in systems'></select>

 Selected Value = {{system}}

If you have to have this structure:

$scope.systems = 
{
  "systems": {
    "android": {
      "name": "Android"
    },
    "ios": {
      "name": "iOS"
    },
    "web": {
      "name": "Web"
    }
  };

then I would do it with ng-repeat (I don't see the other way):

 <select ng-model='system' ng-repeat='(key, values) in systems'>
      <option ng-repeat='(k,v) in values' ng-bind='v.name'></option>
    </select>

 Selected Value = {{system}}

I hope it helps :)

Upvotes: 1

Related Questions