angularjs - formularios - tablas angular 4

Opción ng dinámica AngularJS para vincular dos menús desplegables

Question

¿Alguien puede ayudarme con un problema de ng-option, estoy tratando de tener ng-option creada dinámicamente? Lo que estoy haciendo es bastante complejo, pero traté de explicarlo en el siguiente enlace. Tengo dos menús desplegables; el primero tiene valores como condado, municipio y distrito según lo que se seleccione en el primer cuadro desplegable. El segundo cuadro desplegable tendrá uno de los dos condados. o municipio o distritos poblados. pero el truco es que el json para el condado o distrito o municipio tiene una estructura diferente, por lo que la opción ng para el segundo menú desplegable debe ser dinámica. por favor ayuda

<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'' }];    
});

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

Gracias

Answer 1

¿Me gusta esto?

Ejemplo

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''}
    ];
});