How do I bind 2 select options in AngularJS? - angularjs

<select ng-model="listaAddAct.zone" ng-options="zona.route for zona in zone">
<option value="">Selected 1</option>
</select>
<select ng-model="listaAddAct.zone1" ng-options="zona1.route for zona1 in zone1">
<option value="">Selected 2</option>
</select>
What do i need:
When I make a selection in the first select and automatically my code to make a selection in the second option select.
can someone help me :)


If i have understood your question correctly. You need to use ng-change
<select ng-model="listaAddAct.zone" ng-options="zona.route for zona in zone" ng-change="listaAddAct.zone1=listaAddAct.zone">
<option value="">Selected 1</option>
</select>


i solve it :)
if($scope.zone){
$scope.zone.forEach(function(zona){
if(zona.Ruta == $scope.listaAddAct.ridicari.Nume){
$scope.listaAddAct.zone = zona;
}
});
}

Related

Force to POST dynamic select including empty value

I have multiple select with the same name like this :
<select name="test[]"><option>blah....</option></select>
<select name="test[]"><option>blah....</option></select>
<select name="test[]"><option>blah....</option></select>
<select name="test[]"><option>blah....</option></select>
in php code i have :
$atest = $_POST['test'];
print_r($atest);
But, I got only data from not empty select, how to force $_POST to include all select disregarding it has value or not, so the array contains always 4 items.
thank you.

Multiple select you can use
<select name="test[]" size="7" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
After request you check $_POST['test'] is array that contains selected options
$test = $_POST['test'];
var_dump($test);

Angular form dropdown 1 used to select option in dropdown 2

I have two dropdown menus in an Angular form. One is country and the other is country dialing code. When the user selects USA on the first dropdown, I want to update the second dropdown to default to +1 for the dialing code. Otherwise, the second dropdown should deafult to the placeholder "Select Country Code". I have successfully done this using javascript, but Angular still considers the form to be invalid when submitted. I've tried forcing the field to become valid in the javascript, but it doesn't seem to work. Is there a way to do this using javascript or an ng command in the HTML? I would like to keep the html formatted as is (i.e. with the select and options tags).
HTML:
<select required
class="form-control vertical-gap-5--bottom color-gray--warm-8"
id="country" name="country" type="text"
ng-model="contactSession.country">
<option data-countryCode="UG" value="256">Uganda</option>
<option data-countryCode="UA" value="380">Ukraine</option>
<option data-countryCode="AE" value="971">United Arab Emirates</option>
<option data-countryCode="GB" value="44">United Kingdom</option>
<option data-countryCode="US" value="1">United States</option>
<option data-countryCode="UY" value="598">Uruguay</option>
<option data-countryCode="UZ" value="998">Uzbekistan</option>
</select>
<select required
class="form-control vertical-gap-5--bottom color-gray--warm-8"
id="countryCode" name="countryCode" type="text"
ng-init="contactSession.countryCode = '1'"
ng-model="contactSession.countryCode">
<option value="" selected="selected">Select Country Code</option>
<option data-countryCode="UA" value="380">Ukraine (+380)</option>
<option data-countryCode="AE" value="971">United Arab Emirates(+971)</option>
<option data-countryCode="GB" value="44">United Kingdom (+44)</option>
<option data-countryCode="US" id="usaSelection" value="1">United States (+1)</option>
<option data-countryCode="UY" value="598">Uruguay (+598)</option>
</select>
JS:
$('select[name=country]').change(function () {
if ($(this).val() == '1') {
document.getElementById("countryCode").value = document.getElementById("usaSelection").value;
} else {
document.getElementById("countryCode").value = "";
}
});

I've made a fiddle, but I am not sure whether this is same as your intent or not.
Change select box
<select ng-options="country.code as country.nameAndCode for country in countries"
ng-model="selectedCountryAndCode"
ng-change="changeCountryAndCode();"
required>
<option value="">Select Country Code</option>
</select>
If you use 'ng-options', it'll make code more simple.
.
.
UPDATE
Here's updated fiddle.
A little modified following as I've understood.
.
.
.
Latest UPDATE
Here's another updated fiddle

ng changes does not work

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>

ng-options filter by value in another dropdown

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

Angular select ng-options hell

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

Resources