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>
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.
I have a drop down which contains the following values
<select class="form-control">
<option value="critical">Critical</option>
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>
Because of this in drop-down the value is always selected to "Critical"
In my scope i have defined the values of severity per drop-down. How do i select that ?
For example say the value is "High". How do i set the default value to high and not critical
You'll need to define at object within your scope and bind it to the ng-model of your select.
Script
$scope.form = {
"severity": "high"
};
HTML
<select class="form-control" ng-model="form.severity">
<option value="critical">Critical</option>
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>
There are a couple of ways to select an option with angular:
1- Bind it to a model and set the model:
<select class="form-control" ng-model="myValue">
And
$scope.myValue = 'medium';
2- You can set it in a directive by jQuery or JS:
$("#yourselectid").val('low');
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'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>