由网友(嘟嘟嘟~占線中)分享简介：谁能帮我用NG选项的问题，我想有动态创建的NG-选项。什么我做的是pretty复杂的，但我试图解释它下面的链接我有两个下拉列表基于什么在第一个下拉选择下拉框中第二个下拉框将要么县，市，区填充第一个有一个像县，市，区的值。但诀窍是，县，区，市的JSON有不同的结构，所以NG-选项第二个下拉已是动态的。请大家帮忙Can...

谁能帮我用NG选项的问题，我想有动态创建的NG-选项。什么我做的是pretty复杂的，但我试图解释它下面的链接我有两个下拉列表基于什么在第一个下拉选择下拉框中第二个下拉框将要么县，市，区填充第一个有一个像县，市，区的值。但诀窍是，县，区，市的JSON有不同的结构，所以NG-选项第二个下拉已是动态的。请大家帮忙

Can anyone help me with a ng-option issue, I am trying to have ng-option created dynamically. What I am doing is pretty complex but I tried to explain it in following link I have two drop downs the first one has values like county, municipality and district based on whats selected in first drop down box the second drop down box will have either county or municipality or districts populated. but the trick is that the json for county or district or municipality have different structure so the ng-option for the second drop down has to be dynamic. please help

<div ng-controller="myCtrl">
    <select id="FeatureTypeDropdown" class="form-control input-sm" ng-model="factory.geography.featuretype" ng-options="ft as ft.type for ft in featuretype" ng-change="SimpleMethod(featuretype.selected)">
        <option value="">Select a Feature Type...</option>
    </select>
    <select id="Select1" class="form-control input-sm" ng-model="factory.geography.county" ng-options="c as c.CountyName for c in County" multiple>
        <option value="">Select a Feature...</option>
    </select>    
</div>

ANG

ular.module("myApp",[])
.controller("myCtrl",function($scope){

        $scope.featuretype = [
                    { type: 'County' },
                    { type: 'Municipality'},
                    { type: 'District'}
    ];
    $scope.County = [{ CountyName: 'C1', countyNumber: '01' }, { CountyName: 'C2', countyNumber: '02' }, { CountyName: 'C3', countyNumber: '03' }, { CountyName: 'C4', countyNumber: '04' }];
    $scope.Municipality = [{ MunicipalityName: 'M1', MunicipalityNumber: '01' }, { MunicipalityName: 'M2', MunicipalityNumber: '02' }, { MunicipalityName: 'M3', MunicipalityNumber: '03' }];
    $scope.Districts = [{ DistrictsName: 'D1', DistrictsNumber: '01' }, { DistrictsName: 'D2', DistrictsNumber: '02' }, { DistrictsName: 'D3', DistrictsNumber: '03' }];    
});

http://jsfiddle.net/LfEMw/3/

感谢

推荐答案

喜欢这个？

HTML

<div ng-controller="myCtrl">
    <select id="FeatureTypeDropdown" class="form-control input-sm" ng-model="option1" ng-options="ft as ft.type for ft in featuretype">
        <option value="">Select a Feature Type...</option>
    </select>
    <select id="Select1" class="form-control input-sm" ng-model="factory.geography.county" ng-options="c as c[option1.displayName] for c in option1.data" multiple>
        <option value="">Select a Feature...</option>
    </select>    
</div>

JS：

angular.module("myApp",[])
.controller("myCtrl",function($scope){
    $scope.County = [{ CountyName: 'C1', countyNumber: '01' }, { CountyName: 'C2', countyNumber: '02' }, { CountyName: 'C3', countyNumber: '03' }, { CountyName: 'C4', countyNumber: '04' }];
    $scope.Municipality = [{ MunicipalityName: 'M1', MunicipalityNumber: '01' }, { MunicipalityName: 'M2', MunicipalityNumber: '02' }, { MunicipalityName: 'M3', MunicipalityNumber: '03' }];

    $scope.Districts = [{ DistrictsName: 'D1', DistrictsNumber: '01' }, { DistrictsName: 'D2', DistrictsNumber: '02' }, { DistrictsName: 'D3', DistrictsNumber: '03' }];

        $scope.featuretype = [
            { type: 'County', data:$scope.County, displayName:'CountyName' },
             { type: 'Municipality', data:$scope.Municipality, displayName:'MunicipalityName'},
             { type: 'District', data:$scope.Districts, displayName:'DistrictsName'}
    ];
});