how to render the options inside angular select box

Question

How do i render the values inside dropdown(selectbox options). I need to show 'header' and 'footer' names inside selectbox.

$scope.sections = [
   {
      "header":{
         "background-color":"#fff",
         "color":"#fff"
      },
      "footer":{
         "background-color":"#fff",
         "color":"#fff"
      }
   }
];

I tried in the following way but not working,

<select name="section" class="form-control" ng-model ="section">
   <option ng:repeat="options[0] in sections">
        {{options[0]}}
  </option>
</select>

check out this: http://stackoverflow.com/questions/10954286/angularjs-how-can-i-reference-the-property-name-within-an-ng-repeat — rzysia, Jul 30 '15 at 11:26

Ehtesham · Accepted Answer · 2015-07-30T12:25:20.047

3

You need to iterate over keys instead of values.

<option ng-repeat="(option, val) in sections[0]">
    {{option}}
</option>

Or with ng-options

ng-options="option for (option, val) in sections[0]"

see the plunker http://plnkr.co/edit/FQEooL5wNh8Xl8GprT99?p=preview

edited Jul 30 '15 at 12:25

answered Jul 30 '15 at 11:56

Ehtesham

2,967
1
18
20

Perfect!. Thanks and +1 :-). How can we achieve the same using ng-options? is it possible ?? – Sameer K Jul 30 '15 at 11:59

how to render the options inside angular select box

1 Answers1