ng选项组合了两个动态字段

Question

我正在显示两个下拉列表，第二个下拉列表的ng-option是动态的但是如何组合下拉列表中显示的两个动态字段，我知道如何为静态字段执行此操作。请查看jsfiddle http://jsfiddle.net/LfEMw/5/

查看：

<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>    
    <br/><br/>
        I want second drop down to display in this format when any feature is selected<br/>
    <select id="Select2" class="form-control input-sm" ng-model="factory.geography.county" ng-options="c as c.CountyName + '-' + c.countyNumber for c in County" multiple>
        <option value="">Select a Feature...</option>
    </select>    

</div>

控制器：

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

Answer 1

更新

哦！我现在明白了，你想要这样的东西：

Example

自定义$filter +控制器

angular.module("myApp",[])
.filter('customInterpolate', function($interpolate){
    return function(context, expression){
        return $interpolate(expression)(context);  
    }
})
.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, displayExpression:'{{CountyName}}-{{countyNumber}}' },
            { type: 'Municipality', data:$scope.Municipality, displayExpression:'{{MunicipalityName}} whatever {{MunicipalityNumber}}'},
            { type: 'District', data:$scope.Districts, displayExpression:'{{DistrictsName}} different {{DistrictsNumber}}'}
    ];
});

模板

<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|customInterpolate:option1.displayExpression) for c in option1.data" multiple>
        <option value="">Select a Feature...</option>
    </select>    
</div>

---

---

旧答案

喜欢这个吗？

Example

查看：

<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]+'-'+c[option1.displayCode] for c in option1.data" multiple>
        <option value="">Select a Feature...</option>
    </select>    
</div>

控制器：

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