CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-optionsng-init
user6656724
user6656724

Reputation:

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

Upvotes: 0

Views: 2240

Answers (2)

Meena
Meena

Reputation: 715

Try this in your controller

var app = angular.module('App', []);
app.controller('Ctrl', function($scope) {
$scope.comnamelistfun = [
  {comname: 'One'},
  {comname: 'Two'},
  {comname: 'Three'}
];
 $scope.ucomname=$scope.comnamelistfun[0].comname;
});

View

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

Upvotes: 1

Sajan
Sajan

Reputation: 1923

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>

Upvotes: 1

Related Questions