AngularJS动态NG-选项来连接两个下拉菜单 [英] AngularJS dynamic ng-option to link two drop downs

问题描述

谁能帮我用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'}
    ];
});

这篇关于AngularJS动态NG-选项来连接两个下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！