I would like to have a select with a placeholder in angularjs with bootstrap. The solutions I have found do not work with angular
Here is my angular markup:
<select ng-model="myModel"
ng-options="p.name for p in ..."
class="form-control list-selector required">
<option value='' disabled selected>Please Choose</option>
</select>
If someone has a working solution...
thanks :)
You need to add an empty option to your select:
<option value="">- Please Choose -</option>
Here is a working example: http://jsfiddle.net/DianaNassar/FShdc/
For Angularjs Versions and reactive forms , if you are using ngValue to bind values in options , the following type of solution will work:
<option value='' selected ng-value="null">Please Choose</option>
For Angular 2+ Versions something like this will work-
<select class="form-control"
formControlName="roomType"
(change)="changeRoomType($event)">
<option [ngValue]="null" selected>Room Type</option>
<option *ngFor="let room of roomTypes" [ngValue]="room">{{room}}</option>
</select>
For reference, check this link out-https://netbasal.com/angular-quick-tip-how-to-show-a-placeholder-in-select-control-bab688f98b98
Related
I just updated the AngularJs version from AngularJS v1.4.8 to AngularJS v1.8.0 and I have a select which requires a default value. for some reason the ng-selected stop working. Can you please advise how to set the ng-selected on 1.8.0 please? (code uses an ng-model)
<input name="questionamount" class="form-control uservalue" type="number" min="0" ng-model="userInput1" ng-disabled="content.NotRelevant" ng-blur="setMainFieldAsTouched(); updateFormVisibility()" ng-change="update('userInput1',userInput1)" val-bubble>
<select name="questionperiod" class="form-control" ng-model="userInput2" ng-disabled="content.NotRelevant" ng-blur="setMainFieldAsTouched()" ng-change="update('userInput2',userInput2)" val-bubble>
<option value="">-- Select a period --</option>
<option value="48">Year</option>
<option value="24">6 Months</option>
<option value="12">Quarter</option>
<option value="4" ng-selected="true">Month</option>
<option value="5">Four Weekly</option>
<option value="2">2 Weeks</option>
<option value="1">Week</option>
</select>
<input name="questionvalue" class="form-control" type="number" min="0" readonly ng-required="content.Mandatory && !content.NotRelevant" max="{{content.TriggerLimit}}" ng-change="update('content.Value',content.Value)" ng-blur="updateFormVisibility()" ng-model="content.Value" val-bubble>
</div> ```
Thanks in advance,
Jordi
From the docs:
Note: ngSelected does not interact with the select and ngModel
directives, it only sets the selected attribute on the element. If you
are using ngModel on the select, you should not use ngSelected on the
options, as ngModel will set the select value and selected options.
Which would mean, set the value of userInput2 to your default value and do not use the ng-selected attribute. See also this.
How can I pre-select an option, when I have the options repeated using ng-repeat, as so:
<select data-ng-model="info.country" ng-change="changeCountry()" name="country" required>
<!-- <option selected disabled hidden value=''></option> -->
<option data-ng-repeat="country in countries" value="{{country.id}}">{{country.countryName}}</option>
</select>
The data-ng-model returns the number 3 , the method ng-change="changeCountry()" uses the same number in its implementation.
I need the pre-selected item to be 3 and not 1 (this will be reduced by 1, since it is an array, but I think you get the idea)
I need to pre-select the item. Is this possible, and how can one achieve such result?
CodePen here.
ng-repeat on <options> converts id to string. This is a reason why it doesn't work.
{"country":3} vs {"country":"3"}
You can solve it by using ng-options:
<select data-ng-model="info.country"
ng-change="changeCountry()" name="country"
ng-options="c.id as c.countryName for c in countries"
required>
</select>
I managed to achieve this by using ng-options:
<select ng-options="country.id as country.countryName for country in countries" ng-model="info.country" ng-change="changeCountry()" name="country" required></select>
I have some doubts with using ngoptions. I am not able to set value attribute for the option items.Here is example plunker
$scope.ListOfValues=[{optiontext:'Active',optionvalue:'opt1'},
{optiontext:'inactive',optionvalue:'opt2'},
{optiontext:'terminated',optionvalue:'opt3'}];
And my html code is
<select id="emptype" ng-model="empstatus" ng-options="emp.optionvalue as emp.optiontext for emp in ListOfValues">
</select>
The generated html is as shown below.
<select id="emptype" ng-model="empstatus" ng-options="emp.optionvalue as emp.optiontext for emp in ListOfValues" class="ng-valid ng-dirty ng-valid-parse ng-touched">
<option value="string:opt1" label="Active">Active</option>
<option value="string:opt2" label="inactive">inactive</option>
<option value="string:opt3" label="terminated">terminated</option>
</select>
I was expecting it to be as shown below
<select id="emptype" ng-model="empstatus" ng-options="emp.optionvalue as emp.optiontext for emp in ListOfValues" class="ng-valid ng-dirty ng-valid-parse ng-touched">
<option value="opt1" label="Active">Active</option>
<option value="opt2" label="inactive">inactive</option>
<option value="opt3" label="terminated">terminated</option>
</select>
So why does it add string: to the value attribute? How i can get my desired output?
It has to deal with 1.3 -> 1.4 Angular version API change - if you check this plunkr (v.1.3) it will show just indexes as values of the <option> tags.
To make it also work with Angular +1.4 you should add the following statement to your ng-options expression track by emp.optionvalue. See this plunkr (v.1.4) .
<select id="emptype"
ng-model="empstatus"
ng-options="emp.optionvalue as emp.optiontext for emp in ListOfValues track by emp.optionvalue">
</select>
But the value of the ng-model is correctly updated in both cases, see {{empstatus}} in template of my examples.
So as #ExplosionPills say that should not be a issue.
This one issue is bugging me since it seems so easy to fix.
I am using plain HTML, but the data is being passed to the next view via angular.
The snippet of code looks like this:
<span data-ng-show="isCountry()">
<select class="selectpicker" data-ng-model="age">
<option value="21">21-24</option>
<option value="25">25-30</option>
<option value="31">31 and up</option>
</select>
</span>
What I am trying to achieve:
Having <option value="25">25-30</option> as the default selected option when angular loads
What I've tried:
Having <option value="25">25-30</option> with a ng-selected="age" attribute
<span data-ng-show="isCountry()">
<select class="selectpicker" data-ng-model="age">
<option value="21">21-24</option>
<option ng-selected="age" value="25">25-30</option>
<option value="31">31 and up</option>
</select>
</span>
Having <option value="25">25-30</option> with a selected="selected" attribute
<span data-ng-show="isCountry()">
<select class="selectpicker" data-ng-model="age">
<option value="21">21-24</option>
<option selected value="25">25-30</option>
<option value="31">31 and up</option>
</select>
</span>
Even trying <option value="25">25-30</option> displayed first
<span data-ng-show="isCountry()">
<select class="selectpicker" data-ng-model="age">
<option value="25">25-30</option>
<option value="21">21-24</option>
<option value="31">31 and up</option>
</select>
</span>
Option 2 and 3 does display the value I want first, but it is not passed through to the next view
If possible, I prefer not to touch much Angular code, as the main developer is out temporary...
Any help would be appreciated.
Thanks!
Apparently, After much digging into the code the - the age is already being set via a js function
a.defaultAge = {
Country: "25"
}
Thanks for the help David - Your comment is a good to know thing for future reference.
There are a problem here, do not use 'age' as the model but try using something like 'user.age' and assign the value to it like this;
var user = {}; user.age = 25;
<select class="selectpicker" data-ng-model="user.age">
The reason it does not work in the next view is, that the 'age' is totally gone when you reassign a new value to it. Angular monitor change to a variable reference, since the variable 'age' is gone, it does not know when to update the view. Using 'user.age' as the model, angular is watching the 'user' for changes, and if you change the age, Angular will update the view for you.
I'm struggling to understand to documentation for ngOptions
I have a simple array : ['code1' , 'code2'] and I just want to iterate over and construct option value and label as follow :
What I expect :
<select>
<option value="" class="">All</option>
<option value="code1">code1.label</option>
<option value="code2">code2.label</option>
</select>
What I've tried :
<select ng-model="select" ng-options="option + '.label' for option in ['code1', 'code2']">
<option value="">All</option>
</select>
What I get :
<select>
<option value="" class="">All</option>
<option value="0">code1.label</option>
<option value="1">code2.label</option>
</select>
See that values aren't what I want .. I tested almost all possible syntax of the documentation without success.
ps: I've simplified the code, but I use angular-translate to translate the received code and put that translation in the option label.
JsFiddle : http://jsfiddle.net/3ekAj/
I'm guessing what you want is:
<select ng-model="select" ng-options="option + '.label' for option in ['code1', 'code2'] track by option">
<option value="">All</option>
</select>
Fiddle: jsfiddle