1

I have an angularjs dropdownlist using ng-options

<select ng-options="perlocation.name for perlocation in locations" ng-model="locationDropdown">

My dropdown list loads fine but the selected option 0 is empty and i want to replace it with "Please Select One"

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

How do i do this? All the examples i have seen online doesnt seem to work.

Thanks

2 Answers 2

4

In the angular documentation for select it states

Optionally, a single hard-coded element, with the value set to an empty string, can be nested into the element. This element will then represent the null or "not selected" option. See example below for demonstration.

Which means you can do this:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-init="arr=[1,2,3]">
    <select ng-model="val" ng-options="x for x in arr">
      <option value="">Please select an option</option>
    </select>
    <br>
    Val: {{val}}
  </div>
</div>

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

Comments

-2

Initialize $scope.locationDropdown = 'Please Select One' as default

or

<select ng-options="perlocation.name for perlocation in locations" ng-model="locationDropdown">
  <option> Please Select One </option>
</select>

3 Comments

This is not good because then 'Please Select One' becomes a valid option, which it should not be.
@DavidGrinberg it depend upon him how he want and select is itself a directive and we adding html inside in it.I don't know may be it's a right things
It does not depend. You never want "please select one" to be an actual option. Also you're edit doesn't even work, please read the angular docs.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.