I have a cross platform app developed using AngularJS, Monaca and OnsenUI.
One of my views is large form where the user can select a number of drop-down select values. For a large part of the form the options would be Yes/No drop-down select options.
I have created an array in my app.js to hold the Yes/No options to populate the drop-down select values as below.
$scope.OptionYesNo = [{
yesnooptiondesc: "No",
yesnooptionid: "0"
}, {
yesnooptiondesc: "Yes",
yesnooptionid: "1"
}];
Then to populate my drop-down select options I do the following in my view:
<ons-row>
<ons-col>
Option 1
<select id="" name="" ng-model="OptionYesNo.yesnooptionid" ng-options="yesNoOption.yesnooptionid as yesNoOption.yesnooptiondesc for yesNoOption in OptionYesNo" ng-change="changedValue(OptionYesNo.yesnooptionid, 'OptionOne')">
<option value="" label="-- Please Select --"></option>
</select>
</ons-col>
</ons-row>
Then in my app.js I handle the changes in the selected values options in my changedValue(...) function as below. I pass an identifier to the function as well as an indicator to which array to save the value to (omitted because not relevant)
$scope.changedValue = function (selectedValue, identifier) {
switch (identifier) {
case "OptionOne":
$scope.optionOneArray.push(selectedValue);
break;
case "OptionTwo":
$scope.optionTwoArray = selectedValue;
break;
}
}
The problem is when I try and add a second Yes/No option using the same method as above e.g.
<ons-row>
<ons-col>
Option 2
<select id="" name="" ng-model="OptionYesNo.yesnooptionid" ng-options="yesNoOption.yesnooptionid as yesNoOption.yesnooptiondesc for yesNoOption in OptionYesNo" ng-change="changedValue(OptionYesNo.yesnooptionid, 'OptionTwo')">
<option value="" label="-- Please Select --"></option>
</select>
</ons-col>
</ons-row>
Whenever I change one select value, the other one changes as well because they use the same ng-model. How do I manage this situation? I dont want (or think I have to) create a $scope.OptionOneYesNo = [{ ... }]; $scope.OptionTwoYesNo = [{ ... }]; for each select drop-down as there could potential be 20+ select drop-downs.
You need to create different ng-models in the view for your dropdowns. Don't use the same model on all the dropdowns. You can still iterate over the options from $scope.optionsyesno on each dropdown. This should do the trick.
Probably this can point you to the right direction. You can repeat over your option array. As in an example i used which is working well:
<select class="form-control" ng-model="user.gefunden" ng-required="true" ng-init="user.gefunden = gefunden[0]" ng-options="o as o for o in gefunden">
</select>
Gefunden is my array in the controller.
Related
Now I am working in an search functionality module using angularjs, search functionality is implemented by multiple select options, user can select more than one option in select tag, it's not a problem, but I am facing issue to load the saved search details into the select tag,(have to show pre-selected search data into the select tag)
<select name="" ng-model="sex" multiple ng-options="sex.name as sex.name for sex in choosesex">
</select>
which displays the list like Male and Female like below,
$scope.choosesex = [{ID:1,name:"Male"},
{ID:2,name:"Female"}];
I have get the json response from saved search, while pushing the result into the ng-model it doesnot show the selected option in select tag, Please share your opinions regarding this issue to fix. Thanks in advance.
sex.name as sex.name is not right. Try this:
<select name="" ng-model="sex" multiple ng-options="sex as sex.name for sex in choosesex"></select>
I am currently trying to make a drop down menu that runs off of a model but also has two "default" options that are at the top. Currently I have the following:
<select class="category-selector" chosen
inherit-select-classes="true"
ng-if="auction.category_options.length > 1"
ng-model="auction.active_category"
ng-options="g.label group by g.main_category for g in auction.category_options"
ng-change="auction.active_category == null ? auction.clear_keyword_matching() : auction.refresh_matching_items()">
<option value="" selected>Active items ({{auction.category_counts['Active'].total}})</option>
<option value="all">All items ({{auction.category_counts['All'].total}})</option>
</select>
I am having trouble getting the "All items" option so show up in the dropdown. Is it not possible to declare two options and populate the rest using the ng-options / model?
Image of dropdown
Adding extra option tags only works if you set value="" for the additional options
<option value="" selected>...</option>
As soon as the value isn't empty, it will not show, as explain here. So you will probably need build this using ng-repeat.
In this answer, there is a solution using a directive, maybe that could work.
I have an array of strings, that are account numbers. When a record in a table is clicked i provide a modal to update the record and one of the fields is account number. This displays and some what correctly but seems to loss its two way binding with vm.accountNumber but also does show the value that the model is.
vm.accountNumber always has a value that is set when the table row is being clicked for editing. It just never makes it to the select despite the model. I suspect im losing the two way link and it is creating its own variable for the model.
<select class="ui search fluid selection dropdown" id="accountSearch" ng-model="vm.accountNumber">
<!--ng-options="account for account in vm.accounts.slice(1)">-->
<option ng-repeat="account in vm.accounts | limitTo: vm.accounts.length : 1" value="account" ng-selected="account == vm.accountNumber">{{account}}</option>
</select>
Here is a snippet of the accounts array.
0:"-"
1:"0001"
2:"0002"
3:"0003"
4:"0004"
I would say just use ng-options directive instead of ng-repeating option
<select class="ui search fluid selection dropdown"
id="accountSearch" ng-model="vm.accountNumber"
ng-options="account for account in vm.accounts">
</select>
Demo Plunkr
Though I'd like to point out your problem was with option value attribute,
you should change
value="account"
to
value="{{account}}"
Am using select2 plugin for a drop down. There are two form blocks. One for user address and another for billing. There is a drop down where the user can choose country(it is from ajax response), and both the dropdowns will be initialized with that value. When i check same as above checkbox, the billing country dropdown should be populated with the above chosen value.
dropdown1
<select class="form-control sel2" id="country_billingAddress"
data-ng-options="country for country in countryList"
data-ng-model="billingcountry">
</select>
dropdown2
<select class="form-control sel2"
data-ng-options="country for country in countryList" id="country_bil"
data- ng-model="billingcountry">
</select>
angular
function copyBillingAddress() {
if($scope.checkBoxSelected) {
$scope.billingcountry = $scope.country;
}
tried the below methods, but it the value to test is still null
$("#country_bil").select2().select2("val", 'oneofthevaluehere');
getting this error:
angular.min.js:114 Error: [$rootScope:inprog]
http://errors.angularjs.org/1.5.0/$rootScope/inprog?p0=%24apply
$("#country_bill").val('dd').trigger('change') //no changes
I am trying to get some cascading drop downs in angular that populate based off of what the previous drop down has selected. So basically there are 5 drop downs total, at first only the first drop down would be populated, and then the second one would populate based off of what is picked in the first (hopefully using $http to get the new info back form server base don what is picked) and so on all the way down to 5.
So basically I have this :
<select class="selectScope" ng-model="scope1">
<option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
<select class="selectLevel1" ng-model="scope2">
<option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
<select class="selectLevel2" ng-model="scope3">
<option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
<select class="selectLevel3" ng-model="scope4">
<option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
<select class="selectLevel4" ng-model="scope5">
<option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
I will have populate the first dropdown with an $http, but without going into detail I am just wondering if I can have the dropdowns trigger off each other. If i have selected all the way down to level 5 and I re-select level 3 - then 4 and 5 would empty (4 would re populate based on what was picked in 3). SO I just want them to work off each other. I am wondering if something like this is possible in angular. Apologies if this is a bit oblivious, I am brand new to using angular. Thanks!!
Firstly, you should be using ng-options instead of an ng-repeat
<select ng-model='scope1' ng-change='scope1Change()'
ng-options='obj.id as obj.name for obj in array'>
</select>
Then, on the ng-change event of the select, you can load the appropriate data for the following selects.
$scope.scope1Change = function() {
//Build URL based on selection
$http.get(myUrl).then(function(data){
//transform data if required
$scope.array2 = data;
});
}
You can keep the other select statements disabled based on previous values being selected
<select class="selectLevel1" ng-model="scope2"
ng-options='obj.id as obj.name for obj in array2' ng-disabled='!scope1'>
</select>
You would need some additional logic in the change events to work out whether or not you should clear the $scope model values as required, but that is pretty straightforward