Remove empty item from select drop down angularjs

Question

I'm trying to bind data to select drop down using AngularJS ng-repeat directive but it's showing an empty data on page load. How to remove the empty item. Here is the code:

    <html>
  <head>
  </head>
  <body ng-app="app">
    <div ng-controller="homeCtrl">
      <select ng-model="selected">
        <option ng-repeat="item in items" value="{{item.id}}">
          {{item.name}}
        </option>
      </select>
      <span>
        {{selected}}
      </span>
    </div>
  </body>
</html>

Here is the JS code:

var app = angular.module('app',[]);
            app.controller('homeCtrl',['$scope',function($scope){
                $scope.selected = 1;
                $scope.items=[
                    {name: 'harry111',id:1},
                    {name: 'rimmi',id:2}
                ];

            }]);

Here is a DEMO

The answer is simple and posted by @SrinivasML, but better use ng-options instead as a good practice. — Alexis
– Alexis, Commented Jun 28, 2017 at 10:44

Srinivas ML · Accepted Answer · 2017-06-28 10:33:20Z

1

make $scope.selected = 1; as $scope.selected = "1"; it will default select a value

var app = angular.module('app',[]);
			app.controller('homeCtrl',['$scope',function($scope){
				 $scope.selected = "1";
				$scope.items=[
					{name: 'harry111',id:1},
					{name: 'rimmi',id:2}
				];
        
       
         
       
				
			}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
  <head>
  </head>
  <body ng-app="app">
    <div ng-controller="homeCtrl">
      <select ng-model="selected">
        <option ng-repeat="item in items" value="{{item.id}}">
          {{item.name}}
        </option>
      </select>
      <span>
        {{selected}}
      </span>
    </div>
  </body>
</html>

answered Jun 28, 2017 at 10:33

Srinivas ML

7303 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

iJade Over a year ago

why "1" and not 1 ?

Srinivas ML Over a year ago

I am searching for this issue , I had faced this issue once when converted to string it got selected , checking SO questions to add reference

Ankit Agarwal · Accepted Answer · 2017-06-28 10:29:56Z

0

You need to include ng-repeat on <select> tag like this

<html>
  <head>
  </head>
  <body ng-app="app">
    <div ng-controller="homeCtrl">
      <select ng-model="selected" ng-options="value.id as value.name
                                           for (key,value) in items"
  ></select>
      <span>
        {{selected}}
      </span>
    </div>
  </body>
</html>

This will not add the blank option in the select dropdown. Here is the working CODEPEN

answered Jun 28, 2017 at 10:29

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

2 Comments

iJade Over a year ago

but I dont see ng -repeat

Ankit Agarwal Over a year ago

See that, there is ng-option that iterates over the items array.

Sajeetharan · Accepted Answer · 2017-06-28 10:31:47Z

Use ng-options instead,

 ng-options="value.id as value.name for (key,value) in items"

DEMO

var app = angular.module('app',[]);
			app.controller('homeCtrl',['$scope',function($scope){
  		$scope.items=[
					{name: 'harry111',id:1},
					{name: 'rimmi',id:2}
				];
				   $scope.selected = $scope.items[0].id;
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
  <head>
  </head>
  <body ng-app="app">
    <div ng-controller="homeCtrl">
     <select ng-model="selected" ng-options="value.id as value.name
                                           for (key,value) in items"
  ></select>
      <span>
        {{selected}}
      </span>
    </div>
  </body>
</html>

Collectives™ on Stack Overflow

Remove empty item from select drop down angularjs

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related