How do I customize the prompt for selection using ng-options?
I have a selection that uses ng-options to populate the selection like this:
<select class="form-control"
ng-model="Data.selectedPerson"
ng-options="v as (v.Name ) for v in Data.people track by v.Name">
</select>
I don't want to add a value to the default collection if the people collection is empty or no value has been selected yet. I would like to be prompted for a selection to encourage them to use select. Thanks for your suggestions.
+3
source to share
1 answer
Just add a default parameter so angular will use that parameter if nothing is selected in ngModel or no invalid element is filled in the model. This way, you don't have to add a blank value to your collection.
<select class="form-control"
ng-model="Data.selectedPerson"
ng-options="v as v.Name for v in Data.people track by v.Name">
<!-- Add your default option here -->
<option value="">Please select a person</option>
</select>
You can also change the text based on the condition: -
<option value="">{{ Data.people.length ? "Please select a person" : "No one available for selection" }}</option>
You can also remove it from the DOM if it has already selected a value.
<option ng-if="!Data.selectedPerson" value="">Please select a person</option>
+8
source to share