Angular中如何绑定对象ID到变量却显示名称？

我明白你的需求：希望在输入框中显示配置的name，但实际将对应的id绑定到changed_config.id上，而不是直接显示id。直接修改<option>的ng-value为option.id确实会让输入框显示ID，这不是我们想要的效果，这里有个简洁的解决方案：

核心思路 #

我们可以让输入框绑定到changed_config.name（用来显示名称），然后通过ng-change事件触发一个方法，根据选中的名称从configs列表中匹配对应的ID，再赋值给changed_config.id。这样既保证输入框显示的是友好的名称，又能把正确的ID存到变量里。

修改后的HTML代码 #

<table style="width:900px;">
  <tr>
    <th style="width:500px; margin:50px">Config Name</th>
    <th style="width:150px;">Config Value</th>
  </tr>
  <tr ng-repeat="changed_config in changed_configs">
    <td>
      <!-- 绑定name到输入框，触发onConfigNameChange方法 -->
      <input type="text" class="form-control" 
             ng-model="changed_config.name" 
             list="names"
             ng-change="onConfigNameChange(changed_config)">
      <datalist id="names">
        <option ng-repeat="option in configs | filter:search | limitTo:30" 
                ng-value="option.name">
          {{option.name}}
        </option>
      </datalist>
    </td>
    <td>
      <input type="text" class="form-control" ng-model="changed_config.value">
    </td>
  </tr>
</table>
<div class="row">
  <button type="button" id="add-reward-grp-btn" ng-click="addConfig()" class="btn btn-primary">Add Config </button>
</div>

修改后的控制器代码 #

var app = angular.module("drs_scheduler_app", []);
app.controller("CreateSchedulerJob", function ($scope, $http) {
  $scope.changed_configs = [];
  $scope.configs = [{ id: "1", name: "config1" }, { id: "2", name: "config2" }];

  $scope.addConfig = function () {
    // 初始化时同时包含name和id字段
    var config = { "id": "", "name": "", "value": "" };
    $scope.changed_configs.push(config);
    console.log(config);
    console.log(JSON.stringify($scope.changed_configs));
  };

  // 新增的方法：根据选中的name匹配对应的id
  $scope.onConfigNameChange = function(changedConfig) {
    if (!changedConfig.name) {
      changedConfig.id = "";
      return;
    }
    // 从configs中找到匹配name的配置项
    var matchedConfig = $scope.configs.find(function(config) {
      return config.name === changedConfig.name;
    });
    if (matchedConfig) {
      changedConfig.id = matchedConfig.id;
    } else {
      // 如果输入的名称不在列表中，可以清空id或者做其他处理
      changedConfig.id = "";
    }
  };
});

额外优化（可选） #

如果想避免用户输入不在列表中的名称，可以在onConfigNameChange里添加判断，当找不到匹配项时清空输入框的name值，或者给出提示。比如：

if (!matchedConfig) {
  changedConfig.name = "";
  changedConfig.id = "";
  alert("请选择列表中的配置名称");
}

这样处理后，用户在输入框看到的是友好的配置名称，但实际存储到changed_config.id的是对应的ID，完美满足你的需求。

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