Remove empty option value from angular js selectbox

Question

I am using angular js for displaying dynamic option value in selectbox. One issue i am facing is by default it is appending one empty option to the select box. Below is the selectbox code.

                      <select class='flowprovetermin' ng-change='gradeReloadData()' data-ng-model="provetermin[0]">
            {loop="$proveterminOptions"}
            <option value="{$value['proevetermin']}">{$value['proevetermin']}</option>
            {/loop}
           </select>

Please any one let me know how to remove the default empty value.

Possible duplicate of [Why does AngularJS include an empty option in select?](http://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select) — binariedMe, Mar 20 '17 at 20:26

score 0 · Answer 1 · answered Mar 20 '17 at 20:31

Look into using ng-options to set the <select> options.

Example (HTML):

<select class='flowprovetermin' 
        ng-change='gradeReloadData()' 
        ng-model="mySelectedOption"
        ng-options="myOptions">
</select>

Example (JS):

$scope.myOptions = [
    { id: "option1", name: "Option 1" },
    { id: "option2", name: "Option 2" },
    { id: "option3", name: "Option 3" }
];

Note:

It looks like you're assigning ng-model to an object in an array. This object should probably be assigned to a variable. ng-model on your <select> box is the selected option.

Remove empty option value from angular js selectbox

1 Answers1