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.
Related
I am using a dropdown like below
<select class="form-control"
data-ng-model="vm.priceBuilder.projectID"
data-ng-change="vm.changeProject(option)"
data-ng-options="option.pK_ProjectID as option.projectNumber for option in vm.projectList">
<option value="">Please select...</option>
</select>
and my controller binding is
changeProject(selectedProject) {
this.getSubTask(selectedProject.fK_ProjectID);
};
Here selectedProject is undefined. what is actual cause I can not understand.
clearly option is not defined you need to call the ng-change wither with the model or use the model in your function.
<select class="form-control"
data-ng-model="vm.priceBuilder.projectID"
data-ng-change="vm.changeProject(vm.priceBuilder.projectID)"
data-ng-options="option.pK_ProjectID as option.projectNumber for option in vm.projectList">
<option value="">Please select...</option>
</select>
This seems to be a really straight forward code, but I cannot figure out why it is not working.
I want to filter the 'model' dropdown by selected 'make',
Make:
<select ng-model="makeng" ng-options="option.display for option in makes">
<option ng-disabled="true" ng-selected="true" value="">Select a make</option>
</select>
Model:
<select ng-model="modelng" ng-options="option.display for option in models | filter:{make:makeng}">
<option ng-disabled="true" ng-selected="true" value="">Select a model</option>
</select>
here is the plunker
http://plnkr.co/edit/bHb9AScd2m58acUUyI0t?p=preview
Problem is with your first ngoption, you need to set the model as the value of value property using select as syntax option.value as option..
<select ng-model="makeng"
ng-options="option.value as option.display for option in makes">
Plnkr
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
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
I have a dropdown;
<select class="form-control" data-ng-model="selected_category" data-ng-change="search(true, true)">
<option value="0">Select Category</option>
<option value="{{category.id}}" data-ng-repeat="category in categories">{{category.name}}</option>
</select>
Which works perfect. However, I am manipulating the scope outside of Angular (valid reason) and I use this (It's in coffeescript but easy to understand)
scope.$apply (s) ->
s.units = _me.attr('data-units')
s.selected_category = parseInt(_me.attr('data-category'))
s.search(true,true)
It appears to work in that everything depending on that $scope.selected_category variable changes (The correct products / text comes up) but the dropdown just goes blank if I've selected Select Category (IE: Not changed it since that change) and stays the same if anything else is selected. Looking at the blank dropdown when I use the element inspector in chrome I can see this:
<option value="? number:31 ?"></option>
What's up with that?
It appears that you are missing the ng-selected attribute on option to let Angular know which option is currently selected:
<select class="form-control" data-ng-model="selected_category" data-ng-change="search(true, true)">
<option value="0">Select Category</option>
<option value="{{category.id}}" data-ng-selected="selected_category.id == category.id" data-ng-repeat="category in categories">{{category.name}}</option>
</select>
However, it is prefered to use ng-options if you don't need to do anything to advanced. So, I'd recommend (as #TheSharpieOne mentions in comments), that you change to this:
<select ng-model="selected_category" ng-options="c.name for c in categories">
<option value="">Select Category</option>
</select>
If you need to track by the id then use a track by clause:
<select ng-model="selected_category" ng-options="c.name for c in categories track by c.id">
<option value="">Select Category</option>
</select>