CODEWITHSUNDEEP
javascriptjqueryangularjs
heyred
heyred

Reputation: 2051

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

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.

Upvotes: 0

Views: 1269

Answers (2)

elpeyotl
elpeyotl

Reputation: 372

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.

Upvotes: 1

elpeyotl
elpeyotl

Reputation: 372

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.

Upvotes: 1

Related Questions