angularjs 依赖下拉选项值

Question

我已经使用 angularjs 成功设置了一个依赖下拉列表，但我有一个小问题：
我需要定义每个选项标签的值，因为它是由角度处理器自动设置的。
这是我的 html 代码：

            <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">

这是我的 angularjs 代码：

<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>

我再说一遍，我已经成功地在第二个下拉列表中设置了选项的值，但是对于第一个下拉列表，它会自动使用变量国家的名称。

那么我应该如何更改我的代码，以便为第一个下拉菜单中的每个选项标签指定一个特定值。

为了更好地理解我的想法，请检查每个下拉列表中的值。这是我在 plunker 上工作的 sn-p：
http://embed.plnkr.co/VBdxGDQNOJSHeGVfloo2/preview
任何帮助将不胜感激。

---

这是我想做的：

<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>

但现在第二个下拉菜单不起作用，如果您能确定问题将得到解决

Answer 1

这是为您提供的示例实现。这会将值保留在选项标签中。

<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>

控制器：

 $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