Search code examples
angularjsng-options

Setting up the options for a series of dynamic selects

I have an angular model receives data from an API that looks like:

$scope.questions = [
        {name: 'Question 1', options:['Option 1', 'Option 2', 'Option 3'],id: 1},
        {name: 'Question 2', options:['Option A', 'Option B', 'Option C'],id: 2},
        {name: 'Question 3', options:['Option a', 'Option b', 'Option c'],id: 3}

    ]

And, I would like to iterate over all the questions and have a series of one select box per question with the select's options coming from the question object

<div ng-repeat="question in questions">

<label>{{question.name}}</label><select ng-options="?"></select>

</div>

I am having trouble figuring out what the ? should be. I thought ng-options="o in question.options" might work, but no such luck. Can this be done? If so, how?

Solution

  • As per the documentation, it should be

    o for o in question.options

    Note that you'll need to specify an ng-model attribute for this to work:

    <select ng-model="question.selectedOption" ng-options="o for o in question.options"></select>

    Here's a plunk showing that it works.