Bavi Gurunath Bavi Gurunath - 5 months ago 17
Javascript Question

Blank select option #ngValue

How can I avoid blank option in the form output?

<select class="form-control" ng-model="item.type" >
<option ng-value="0">Real</option>
<option ng-value="1">Fake</option>
<option ng-value="2">Both</option>
</select>


item.type is set in the controller

The issue slightly different from what I saw in similar topics because of usage of ng-value and the fact, that value of item.type is already set

Edit: Changing
ng-value
to
value
solved the issue.

Answer

How is item.type set in the controller?

The blank line is the current value of item.type. If you set it as an object in the controller, it's normal to be shown that way. Try setting it to one of the 3 choices you have like this:

   angular.module('yourModule').controller('ctrl', function($scope)){
       $scope.item = {}; //edited
       $scope.item.type = "1"; // or 2, or 0
   }

This is how angular handles two-way databinding. If the value of your item.type does not match any of the options, it is normal to add another blank line.

EDIT:

<select class="form-control" ng-model="item.type" >
    <option value="0">Real</option>
    <option value="1">Fake</option>
    <option value="2">Both</option>
</select>