CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-value
Bavi Gurunath
Bavi Gurunath

Reputation: 83

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.

Upvotes: 0

Views: 374

Answers (2)

Alex Florin
Alex Florin

Reputation: 431

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>

Upvotes: 1

Deep
Deep

Reputation: 9794

The problem of blank option is due to the ng-model is not matching with the ng-option values. Could you just print the value of item.type in view using {{item.type}}.

Make the following changes.

In controller set the item.type as

$scope.item = {}; $scope.item.type = "1";

make the following changes in html. 

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

Upvotes: 0

Related Questions