Angular：绑定数据时在md-table中显示下拉框选中项的标签

md-table 绑定到 assets 数据，其中 application_id 为整数类型。下拉框的可选值配置为：值=application_id，标签=application_name。表格支持编辑，用户可从下拉框选择值。如何在表格中显示下拉框选中项的标签，同时仍保持与 assets 数据的绑定？

提供的表格代码 #

<table id="md-table" class="sa_table">
    <thead>
        <tr class="md-tr">
            <th class="md-td md-td-border label-header centertext p-2" style='width:15%'>Application Name</th>
        </tr>
    </thead>
    <tbody id="md-tbody">
        <tr class="md-tr" ng-repeat="asset in assets">
           <td class="md-td md-td-border value centertext p-2">
                <simple ng-model="asset.asset_elements['description']"></simple>
            </td>
            <td class="md-td md-td-border value centertext p-2">                    
                <drop-down class="title" ng-model="asset.asset_elements['application_id']" ></drop-down>               
            </td>
        </tr>
    </tbody>
</table>     

下拉框组件代码 #

<div class='{{ asset_element.get_classes(); }}' >
    <div class='dropdown_view reg_view {{ asset_element.get_view_classes(); }}' ng-if="asset_element.get_possible_values().length && asset_element.mode == 'regular'"  ng-dblclick="asset_element.double_click();" ng-click='asset_element.single_click();'>{{ asset_element.get_value() }}
    <i class='no_val' ng-if=" ! asset_element.get_value() && asset_element.can_edit() ">{{ asset_element.empty_display(); }}</i>
    <i class="fas fa-pen-square" ng-if="asset_element.can_edit()"></i>
    </div>

    <div layout="row" class="input-group simple_edit {{ asset_element.get_edit_classes(); }}" ng-if="asset_element.mode == 'edit'">
        <div flex=5></div>
        <md-input-container class="dropdown_container" md-theme="input" flex>
            <label class="simple_label">{{ asset_element.get_title() }}</label>
            <md-select ng-model="asset_element.md_object" id='{{ asset_element.get_key() }}' md-theme="input" class="form-control" ng-click="selclicked($event)" ng-change="asset_element.changed();">
                <md-option ng-if="asset_element.allow_null()" value=''>--</md-option>
                <md-option ng-repeat="pv in asset_element.get_possible_values()" value="{{ pv.value }}" ng-selected="asset_element.has_value(pv.value)">{{ pv.label }}</md-option>
            </md-select>
        </md-input-container>
        <div flex=5></div>
        <md-button flex='none' class="md-raised" md-ink-ripple="false" ng-click="asset_element.update();" ng-if='asset_element.has_save_button();'><md-icon md-font-icon="far fa-save" ></md-icon></md-button>
        <md-button flex='none' class="md-raised" md-ink-ripple="false" ng-click="asset_element.mode='regular'" ng-if='asset_element.has_cancel_button();'><md-icon md-font-icon="fa fa-times" ></md-icon></md-button>
    </div>
    <required-badge ng-if="asset_element.is_required() && asset_element.can_edit()" ng-model="asset_element"></required-badge>
</div>

核心是让下拉框在「查看模式」显示选中值对应的标签，同时保持与application_id的绑定，具体操作如下：

1. 修改查看模式的显示逻辑
   当前组件在查看模式下直接输出application_id数值，需要改成从可选值列表中匹配对应的标签。把下拉框组件的查看模板部分修改为：

   <div class='dropdown_view reg_view {{ asset_element.get_view_classes(); }}' ng-if="asset_element.get_possible_values().length && asset_element.mode == 'regular'"  ng-dblclick="asset_element.double_click();" ng-click='asset_element.single_click();'>
       {{ (asset_element.get_possible_values() | filter: {value: asset_element.get_value()})[0]?.label || asset_element.get_value() || asset_element.empty_display() }}
       <i class='no_val' ng-if=" ! asset_element.get_value() && asset_element.can_edit() ">{{ asset_element.empty_display(); }}</i>
       <i class="fas fa-pen-square" ng-if="asset_element.can_edit()"></i>
   </div>
   

   这里用Angular的filter过滤器，从可选值列表中筛选出与当前application_id匹配的项，取其label显示；如果没有匹配项（比如值为空或无效），则 fallback 显示原始值或空提示文本。

2. 确认绑定同步逻辑
   检查组件的changed()和update()方法，确保编辑模式下选中的pv.value（即application_id）会正确同步到asset.asset_elements['application_id']，保证数据绑定的一致性。

3. 性能优化（可选）
   如果可选值列表较大，Angular的filter会有性能损耗，可以在组件控制器中添加一个方法直接获取标签：

   // 下拉框组件控制器中新增方法
   $scope.getDisplayLabel = function() {
       var currentValue = $scope.asset_element.get_value();
       var possibleValues = $scope.asset_element.get_possible_values();
       for (var i = 0; i < possibleValues.length; i++) {
           if (possibleValues[i].value == currentValue) {
               return possibleValues[i].label;
           }
       }
       return currentValue || $scope.asset_element.empty_display();
   }
   

   然后在模板中调用该方法：

   {{ getDisplayLabel() }}
   

内容的提问来源于stack exchange，提问作者user3033959