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.
Related
Angular < 1.4 works with ng-options shown as such:
<select ng-options="option.value as option.label for option in options" ng-model="selectedValue">
With the following array of options:
[{ value:"4_220588",label:"dropdown 1-test value 1"},{value:"4_220589",label:"dropdown 1-test value 2"}]
If you look at the resultant HTML is is as you would expect:
<select ng-options="option.value as option.label for option in options" ng-model="selectedValue" class="ng-pristine ng-valid ng-touched">
<option value="" class="">-- SELECT ONE --</option>
<option value="0" label="dropdown 1-test value 1">dropdown 1-test value 1</option>
<option value="1" label="dropdown 1-test value 2">dropdown 1-test value 2</option>
</select>
As soon as you change the angular version to Angular 1.4+, the option value attribute get's messed up. Here is the output with the same ng-options using a newer version of angular:
<select ng-options="option.value as option.label for option in options" ng-model="selectedValue" class="ng-pristine ng-valid ng-empty ng-touched">
<option value="" class="" selected="selected">-- SELECT ONE --</option>
<option label="dropdown 1-test value 1" value="string:4_220588">dropdown 1-test value 1</option>
<option label="dropdown 1-test value 2" value="string:4_220589">dropdown 1-test value 2</option>
</select>
What is the solution to getting the value to show up still as the index of the array?
Here is the plnkr: http://plnkr.co/edit/3CTUI9b9ntTGWhXDNQI5?p=preview
Your application logic should not be sensitive to the value attribute in the dropdown, because ng-model will set the model correctly regardless of what is output in the HTML. If you application logic does expect a specific format for this attribute, you have 3 ways to deal with this breaking change.
Use ng-repeat instead of ng-options. This is the least recommended option, as it changes the way the select lists work significantly.
Use a track by clause to enforce the key format that you are expecting, i.e. option.value as option.label for option in options track by option.value. This presumes that option.value exists and is the value you wish to represent. http://plnkr.co/edit/TSXfkpf1lhsE9QYa2NAc?p=preview
Change your application logic to expect the hashkey instead, or preferably correct the logic so that it only relies upon ng-model.
One solution would be to use ng-repeat over the options.
<select ng-model="vm.selectedValue">
<option value="" selected disabled>-- SELECT ONE --</option>
<option ng-repeat="option in options"
value="$index"
ng-selected="option === vm.selectedValue">
{{option.label}}
</option>
</select>
Here is your updated Plunkr.
This should do the trick:
<select ng-options="index as option.label for (index, option) in options2" ng-model="vm.selectedValue">
<option value="">-- SELECT ONE --</option>
</select>
On render the value of the selected option would be string:index but will output the desired value without the type included. Here is your edited plunker with the expected result in the Selected Value:
Plunker
By default angular uses an empty value if nothing has been selected in a <select>. How can I change this to a text that says Please select one?
You didnt provide any code so I can't give an example relative to your code, but try adding an option element, e.g.
<select ng-model="item" ng-options="item.category for item in items"
ng-change="doSomething()">
<option value="">Please select one</option>
</select>
Via the ng-selected attribute:
<select>
<option>Hello!</option>
<option ng-selected="selected">Please select one</option>
<option>Another option</option>
</select>
Check out the reference: https://docs.angularjs.org/api/ng/directive/ngSelected
I have a select box that displays GeoAreaName, I need the GeoAreaId of that selection to populate a input field. I have done something similar with a typeahead input but I am unable to apply it here.
plunkr
<label>Geo Area:</label>
<select ng-controller="JobMiscCtrl" ng-model="currentItem.GeoAreaName" ng-options="job.GeoAreaName for job in geoAreaArray">
<option value=""></option>
</select>
<input type="number" ng-model="currentItem.GeoAreaId" />
I have edited your plunker. http://plnkr.co/edit/Ms3qPcwj6dxVF3y75ljZ?p=preview
You had 2 problems.
Your input field was out of the scope of your ng-controller declaration
Your ng-options expression needed to be slightly different.
<select
ng-model="currentItem"
ng-options="job.GeoAreaId as job.GeoAreaName for job in geoAreaArray">
<option value=""></option>
</select>
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
Simply trying to make a default selected value in Angular but thus far I am having no luck.
HTML Before Compile:
<select ng-options="select.Value as select.Name for select in ruleSelect" ng-model="rule.MatchLogic" ng-init="rule.MatchLogic = 0" ></select>
HTML In Browser Source:
<select ng-options="select.Value as select.Name for select in ruleSelect" ng-model="rule.MatchLogic" class="ng-pristine ng-valid">
<option value="?" selected="selected"></option>
<option value="0">All</option>
<option value="1">At Least</option>
<option value="2">At Most</option>
</select>
How do I make value=0 (All) the default selected value.
All you need to do is set your ng-model value rule.MatchLogic to equal the corresponding value in the options. The options you use are ruleSelect.
So for example, set rule.MatchLogic = ruleSelect[someSelector].Value; inside your controller.