Get rid of blank entry in select tag

Question

I have a number of items that get their data from a Json object and populate it using angular.

<select ng-model="MyCtrl.cargoList">
    <option ng-repeat="cargo in MyCtrl.cargoList">{{ cargo.name }}</option>
</select>

And whenever I load the form, I get something like this in my console:

<select ng-model="MyCtrl.cargoList">
    <option value="? object:25 "?></option>
    <option value="">Gloves</option>
    <option value="">Jacket</option>
    <option value="">Shoes</option>
</select>

I can get the values to appear just fine, but I can't seem to get rid of the very first option. I don't mind the select box showing the very first element in the list, but I don't want it to be a blank line. How do I get rid of it?

http://stackoverflow.com/questions/15488181/angularjs-extra-blank-option-added-using-ng-repeat-in-select-tag — Miles Peterson, Jun 22 '15 at 19:02
You can init the ng-repeat, but again, you should use ng-options instead, see answers below — ajmajmajma, Jun 22 '15 at 19:04

Pankaj Parkar · Accepted Answer · 2015-06-22T19:40:56.680

2

You need to select 1st option by default on ng-init="MyCtrl.selectedCargo=MyCtrl.cargoList[0].name" & ng-model name should not be same as that of your cargoList.

Markup

<select ng-model="MyCtrl.selectedCargo" ng-init="MyCtrl.selectedCargo=MyCtrl.cargoList[0].name">
    <option ng-repeat="cargo in MyCtrl.cargoList" value="cargo.name">{{ cargo.name }}</option>
</select>

Demo Plunkr

edited Jun 22 '15 at 19:40

answered Jun 22 '15 at 19:02

Pankaj Parkar

134,766
23
234
299

I'm not sure how, but your solution worked. Much appreciated. – Miles Peterson Jun 23 '15 at 16:05

ajmajmajma · Answer 2 · 2015-06-22T20:00:29.387

0

Use ng-options instead of ng-repeat

 <select ng-model="MyCtrl.selectedListItem" ng-options="cargo for cargo in MyCtrl.cargoList"></select>

You can fine tune the labels/values further if you like, check the documentation here - https://docs.angularjs.org/api/ng/directive/ngOptions

You can ng-init, or set the first value to defualt, something like

MyCtrl.selectedListItem = MyCtrl.cargoList[0]

So if you want a function to detect you have changed the value of the select you would use ng-change like so :

<select ng-model="MyCtrl.selectedListItem" ng-options="cargo for cargo in MyCtrl.cargoList" ng-change="selectChanged"></select>

In your controller

$scope.selectChanged = function(){
 //apply your logic
};

edited Jun 22 '15 at 20:00

answered Jun 22 '15 at 19:00

ajmajmajma

13,712
24
79
133

For those down voting, how may i improve this? – ajmajmajma Jun 22 '15 at 19:05
Not downvoter but re-read `MyCtrl.cargoList = MyCtrl.cargoList[0]` – Satpal Jun 22 '15 at 19:05
@ajmajmajma I'm downvoter. you have same `ng-model` as that of `MyCtrl.cargoList` – Pankaj Parkar Jun 22 '15 at 19:06
Suppose I needed an ng-click for each option. How do I do it, then? – Miles Peterson Jun 22 '15 at 19:47
@MilesPeterson why would you use an ng-click? Typically you would just use ng-change on the select itself. ng-change would fire whatever function you linked it to when you changed the selected value. – ajmajmajma Jun 22 '15 at 19:56

score 0 · Answer 3 · answered Jun 22 '15 at 19:01

Use ngOption <option>

The ngOptions attribute can be used to dynamically generate a list of <option> elements for the <select> element using the array or object obtained by evaluating the ngOptions comprehension expression.

I have used following expression

label for value in array

HTML

<select ng-model="MyCtrl.cargo" ng-options="cargo.name for cargo in MyCtrl.cargoList">
</select>

and In your controller set model value as first element of list

this.cargo = this.cargoList[0]

Also note: You can use MyCtrl.cargoList as model as well as array So you should use another variable to hold the model value.

Get rid of blank entry in select tag

3 Answers3