Select drop down options from array in AngularJS using same ng-model

Question

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.

Can you provide a simple demo to demonstrate how it works??

developer033
– developer033

2016-07-14 02:23:49 +00:00
Commented Jul 14, 2016 at 2:23 — developer033
– developer033, Commented Jul 14, 2016 at 2:23

elpeyotl · Accepted Answer · 2016-07-14 16:28:32Z

1

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.

answered Jul 14, 2016 at 16:28

elpeyotl

3721 gold badge3 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

elpeyotl · Accepted Answer · 2016-07-13 20:43:08Z

1

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.

answered Jul 13, 2016 at 20:43

elpeyotl

3721 gold badge3 silver badges15 bronze badges

4 Comments

heyred Over a year ago

I am not sure if II am picking you up right but if your solution simply iterates over the array to display the option values then this is not the solution I am looking for. I need to be able to use the same array (that I can already iterate over) but for different select drop-downs. My problem is using the same array as a ng-model makes all select drop-down values change to the same if one select drop-down value is changed.

elpeyotl Over a year ago

Ah i understand. What happens if you create different ng-models in the view for your dropdown. But iterate of the options from $scope.optionsyesno? You can have multiple different ng-models. That should work.

heyred Over a year ago

Yip, that did the trick, thanks. If you want to make the comment as an answer Ill mark as accepted.

elpeyotl Over a year ago

Nice it worked! I wrote the correct answer. Please mark it...thx

Collectives™ on Stack Overflow

Select drop down options from array in AngularJS using same ng-model

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related