angularjs依赖的下拉选项值 [英] angularjs dependant dropdown option value

问题描述

结果
我已经成功地建立了使用angularjs依赖下拉菜单，但我有一个小问题：结果
我需要的，因为它是由角处理器设置自动定义每一个选项标记的值。结果
这里是我的html code：结果

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

结果
这里是我angularjs code：结果

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.

所以我应该如何改变我的code给每个选项标签中第一个下拉一个特定的值。结果

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

要很好地理解我的想法，请检查在每一个下拉列表中的值。这里是我的plunker工作片断：结果
http://embed.plnkr.co/VBdxGDQNOJSHeGVfloo2/$p$pview

任何帮助将AP preciated。

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.

这是我想做的事：搜索

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

但现在第二个下拉不起作用，如果你能FIW的problemwill解决

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

推荐答案

下面是给你的样品实施。这将保持选项变量值。

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-model="selectedState" 
    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"
     }]
   }];

工作演示

这篇关于angularjs依赖的下拉选项值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！