CODEWITHSUNDEEP
angularjs
Mawg
Mawg

Reputation: 40175

AngularJS drop down list quandry

This code works 

<select ng-model="connectionsDropDown" ng-options="campaign as campaign.title   
   for campaign in campaigns" ng-change="OnConnectionCampaignChanged(connectionsDropDown)">
 </select>

The newly selected value is passed to OnConnectionCampaignChanged.

However, there is a blank entry at the start of the drop down list.

Some googling told me that I could remove it by adding 

track by connectionsDropDown

However, when I try

<select ng-model="connectionsDropDown" ng-options="campaign as campaign.title   
   for campaign in campaigns" ng-change="OnConnectionCampaignChanged(connectionsDropDown)
    track by connectionsDropDown">
 </select>

OnConnectionCampaignChanged receives the current value, not the newly selected one.

How do I reconcile the two?

I want:
- a drop down list with no blank entry
- to be able to preset the selected value when switching to that view
- to pass the selected value to OnConnectionCampaignChanged when he use chooses another entry

Upvotes: 0

Views: 42

Answers (1)

JB Nizet
JB Nizet

Reputation: 691913

I don't know where you got that track by trick, but it does look like a nasty workaround rather than the proper solution.

To understand why a blank option is present, you have to put yourself in the shoes of angular. Let's say your select is

<select ng-model="selectedFruit" ng-options="fruit for fruit in fruits">

That means: display all the fruits as options in the select box, and select the one which is === to selectedFruit.

Now what happens if selectedFruit is null, undefined, or just not any of the fruits? What should Angular select as option? It can't select any of the fruits, so it adds a blank option and selects that one.

Corollary: if you don't want a blank option, you have to make sure that the selected fruit is always one of the displayed fruits.

In your case, make sure that $scope.connectionsDropDown is referencing one of the objects in $scope.campaigns.

Upvotes: 2

Related Questions