Search code examples
javascriptangularjsangularjs-ng-optionsng-init

Extra blank space is including in dynamic dropdown in angularjs

I am creating a web app in which i am fetching the data from database,

<select ng-model="ucomname" ng-init="ucomname='{{o.comname}}'" ng-change="uucomname(o)">
 <option ng-repeat="o in comnamelistfun" value="{{o.comname}}">{{o.comname}}</option>
</select>

this is my dropdownlist, but it is adding a blank row on the top, but when i fetch static data it works fine, but when i use dynamic data it starts to add an extra blank space in the dropdownlist,

NOTE: data is pure dynamic, and it is working fine with static data

I also tried ng-option but still getting extra blank space

Solution

  • It happens when ng-model of select is undefined or value referenced by ng-model doesn't exist in a set of options. Angular adds it by default in this case. Just give some value according to your logic and it wont show blank option.

    And here in ng-init="ucomname='{{o.comname}}'" I dont think o has any value since you are creating it in ng-repeat inside the select on option tag not on the select tag itself(it correct to ng-repeat the option but you cant get that variable on select)

    EDIT:

    I have added a example. I don't know your exact variables so used one of my choice and hence modified the ng-option declaration a little and removed the change function since I don't have that. But the main line below you should notice that $scope.ucomname = $scope.comnamelistfun[0].comname; where we are assigning a default value for ng-model of select.

    var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.comnamelistfun = [
      {comname: 'a'},
      {comname: 'b'},
      {comname: 'c'}
    ];
    $scope.ucomname = $scope.comnamelistfun[0].comname;
});
    <!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">


<select ng-model="ucomname" ng-options="o.comname as o.comname for o in comnamelistfun">
</select>



</body>
</html>