angularjs dependant dropdown option value

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/28593642/angularjs-dependant-dropdown-option-value

标签

angularjs

ng-options