angularjs dependant dropdown option value

Question

i have successfully set up a dependant dropdown using angularjs, but i have a little problem:
i need to define the value of every option tag because it is set up automatically by angular processor.
here is my html code:

            <div ng-controller="CountryCntrl">

                 <select id="country" ng-model="states" ng-options="country for (country, states) in countries"> 
                  <option value=''>Choose</option>
                 </select>

                Departement: 
                <select id="state" ng-disabled="!states">
                <option value="">Choose</option>
                <option ng-repeat="state in states" value="{{state.id}}">{{state.dep}}</option>
                </select>
            </div>

            <br/>
            <input type="submit" value="go">

and here is my angularjs code:

<script>
    var Aplic = angular.module("Aplic", []);

    Aplic.controller('CountryCntrl', function($scope){

        $scope.countries = {
                        'Aquitaine': [ {'id':'22', 'dep': "Dordogne"}, { 'id':'31', 'dep' : "Gironde"} ], 
                        'Auvergne':  [ {'id' : '3', 'dep' : "Allier"}, {'id' : '15', 'dep' : "Cantal"} ]
                        };            
    });

    </script>

I repeat, i have successfully set up the value for the option in the second dropdown, but for the first one it takes automatically the name of variable country.

so how should i change my code to give every option tag in the first dropdown a specific value.

to understand well my idea, please inspect the values in every dropdown. here is my working snippet on plunker:
http://embed.plnkr.co/VBdxGDQNOJSHeGVfloo2/preview
any help will be appreciated.

here is what i want to do:

<select id="state" ng-model="cou">
                        <option value="">Choisir</option>
                        <option ng-repeat="cou in countries" value="{{cou.id}}">{{cou.name}}</option>
                    </select>

                    <select id="state" ng-disabled="!cou">
                        <option value="">Choisir</option>
                        <option ng-repeat="state in cou.states" value="{{state.id}}">{{state.dep}}</option>
                    </select>

but now the second dropdown does not work, if you can fiw that the problemwill be solved

Are you looking at setting up unique value/code for the country list? If so, you would require to change your data structure a bit — Karthik
– Karthik, Commented Feb 18, 2015 at 21:05
yes, i need to set up a unique value/code for the country list ( as it is done in second dropdown ), and sure it needs to change the data stucture — PyReda
– PyReda, Commented Feb 18, 2015 at 21:08
Why would you need to do this? Each object bound to the option is a unique object. If you use ng-model it will contain the specific object that has been chosen in the select. You don't need to put any specific value into the "value" attribute of the option. — jw56578
– jw56578, Commented Feb 18, 2015 at 21:16
I will explain more; every element in the first dropdown represents a region who have a specific code which i have to put in the option tag's value( becaue this snippet is a part a form ), but usinng my code the tag option's value gets the name of the region automatically like this:<br><option value="Auvergne" label="Auvergne">Auvergne</option> and i have to make it this way for example : <option value="32" label="Auvergne">Auvergne</option> — PyReda
– PyReda, Commented Feb 18, 2015 at 21:23

Daniel Higueras · Accepted Answer · 2016-06-02 07:50:08Z

5

Here is sample implementation for you. This will keep values in option tag.

<div ng-app="Aplic" ng-controller="CountryCntrl">
    <select id="country" ng-model="selectedCountry" ng-options="country.id as country.name for country  in countries track by country.id">
        <option value="">Choose</option>
    </select>Departement:
    <select id="state"
    ng-model="selectedState"
    ng-disabled="!selectedCountry"
    ng-options="state.id as state.dep for state in ((countries | filter:{'id':selectedCountry})[0].states) track by state.id">
        <option value="">Choose</option>
    </select>


    <div>selectedCountry id: {{selectedCountry}}</div>
    <div>selectedState id: {{selectedState}}</div>
</div>

Controller:

 $scope.countries =[
   {
     'id': '1',
      'name': "Aquitaine",
      'states': [{
         'id': '22',
         'dep': "Dordogne"
     }, {
         'id': '31',
         'dep': "Gironde"
     }]
   },
   {
     'id': '2',
      'name': "Auvergne",
      'states':  [{
         'id': '3',
         'dep': "Allier"
     }, {
         'id': '15',
         'dep': "Cantal"
     }]
   }];

Working demo

edited Jun 2, 2016 at 7:50

Daniel Higueras

2,40423 silver badges35 bronze badges

answered Feb 18, 2015 at 21:23

Karthik

1,3776 silver badges8 bronze badges

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

10 Comments

PyReda Over a year ago

You have changed well the structure but those id's needs to be placed in the value attribute of every option tag. if you are using chrome please inspect those dropdowns element and see

PyReda Over a year ago

did you get my idea, or should i explain more ?

Karthik Over a year ago

So you want to set the values without changing the structure? I still dont get it why you would want to set the values in each option tag, when you can get the whole selected object on selection.

PyReda Over a year ago

the structure you have made is good. i have to set the value in every option tag because this snippet is a part of some forms and i need it to validate this last one using those values.

PyReda Over a year ago

i have just tested it, i think you get my idea but your code does not work well. sorry for disturbing

|

Collectives™ on Stack Overflow

angularjs dependant dropdown option value

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related