javascriptangularjsangularjs-ng-value

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.

Solution

  • 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>