如何在AngulrJS中自定義下拉菜單？

Question

我在AngularJS下拉文本中遇到了一些問題。請檢查下面我的代碼

JS

$scope.work_type_list = { 
    model: null, 
    availableOptions: [ 
     {id: '1', name: 'Print Ready File', symbol: 'P'}, 
     {id: '2', name: 'Design Work', symbol: 'D'}, 
     {id: '3', name: 'Design Only', symbol: 'DO'} 
    ] 
}; 

我的HTML

<select class="form-control m-b" name="work_type" ng-model="formData.work_type" ng-options="option.id as option.name for option in work_type_list.availableOptions"> 
    <option value="">Select Work Type</option> 
</select> 

我的電流輸出 -

<select ng-options="option.id as option.name for option in work_type_list.availableOptions" ng-model="formData.work_type" name="work_type" class="form-control m-b ng-pristine ng-valid ng-empty ng-touched"> 
    <option value="" class="" selected="selected">Select Work Type</option> 
    <option label="Print Ready File" value="string:1">Print Ready File</option> 
    <option label="Design Work" value="string:2">Design Work</option> 
    <option label="Design Only" value="string:3">Design Only</option> 
</select> 

我想補充P，D和DO我的選項文本。這裏我的輸出應該是這樣的 -

<select ng-options="option.id as option.name for option in work_type_list.availableOptions" ng-model="formData.work_type" name="work_type" class="form-control m-b ng-pristine ng-valid ng-empty ng-touched"> 
    <option value="" class="" selected="selected">Select Work Type</option> 
    <option label="Print Ready File" value="string:1">Print Ready File(P)</option> 
    <option label="Design Work" value="string:2">Design Work(D)</option> 
    <option label="Design Only" value="string:3">Design Only(DO)</option> 
</select> 

如何自定義下拉選項文本？

Answer 1

您可以在ng-options各部分使用表達式：

<select class="form-control m-b" name="work_type" ng-model="formData.work_type" 
    ng-options="option.id as (option.name + '(' + option.symbol + ')') for option in work_type_list.availableOptions"> 
    <option value="">Select Work Type</option> 
</select>