CODEWITHSUNDEEP
javascriptangularjsselect
ARUNRAJ
ARUNRAJ

Reputation: 489

How to prevent Angular1.0 select (dropdown) extra white space?

I am working on an AngularJS 1.0 application and facing an issue with Angular Select.

Just Copying a dummy code:

<select ng-model ="data.state" ng-options="data.states">

Select

Here, it's listing states of a country and passing a default data as ng-model.

I need to show a text "Select" if default is not matching with the data source.

But it's not working as expected and it's showing an extra empty space instead of select.

Thanks

Upvotes: 0

Views: 951

Answers (2)

Shenoy D&#39;Souza
Shenoy D&#39;Souza

Reputation: 84

<select ng-model ="data.state" ng-options="data.states">

make use of track by in ng-repeat. track by $index or id if any

Upvotes: 0

Kailas
Kailas

Reputation: 7578

"I need to show a text "Select" if default is not matching with the data source." In this case your data.state may be empty (ie "") case. You may be expecting some logic like this:

<label>States : </label>
  <select ng-model ="data.state" ng-options="data for data in data.states" >
    <option value="" selected hidden >SELECT</option> 
    <!--Removes the Empty space and shows "SELECT" as pre-populated by default in the drop-down. -->
  </select>
<br>Selected State : {{data.state}}

Empty space appears as a placeholder offered by Angular to hold text like "Select an option" or "Choose a best answer". You can override this using the <option value="" selected hidden >Select</option> which won't appear in the selected drop down options list as it is hidden.

If you wish to have the select appear as an option for user to choose in order if the field can be remained empty and is not mandatory you can use the following code instead:

 <option value="" selected >SELECT</option>

In controller expecting the data as:

 // $scope.data.state = something that is returned from some API response
 $scope.data = {
  states: [
    "Kerala",
    "Karnataka",
    "Andhra",
    "Haryana"
  ]
}

Checkout the JS Fiddle here for working sample.

Upvotes: 1

Related Questions