Search code examples
angularjsng-options

How to convert ng-repeat to ng-options?


I am not getting how the ng-model are connected to the ng-repeat options. How can the code below be converted to an ng-repeat? I can get the ng-repeat work but

ng-selected="{{alternative.code == question.answer}}"

is what I don't understand how to do with the ng-options.

<select ng-model="question.answer">
   <option ng-selected="{{alternative.code == question.answer}}"
            ng-repeat="alternative in question.alternatives"
            value="{{alternative.code}}">{{alternative.label}}</option>
</select>    

Solution

  • Use the following:

    <select ng-model="question.answer"
            ng-options="alternative.code as alternative.label for alternative in question.alternatives">
    </select>
    

    if question.alternatives is an array and the following:

    <select ng-model="question.answer"
            ng-options="alternative.code as alternative.label for (key, alternative) in question.alternatives">
    </select>
    

    if it is an object. Both expressions start with the syntax value as label, which tells the <select> what to consider a value (to be bound to model) and what to use as a label (visible for users). The whole business with "this option has that value and is selected when model has it too" is then done automatically. See documentation.