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>

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

所以我应该如何更改我的代码，以便在第一个下拉列表中为每个选项标记指定一个特定的值。

要理解我的想法，请检查每个下拉列表中的值。这是我在plunker上的工作片段：
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

angularjs依赖下拉选项值

1 个答案: