如何在ui-select的ng-model中绑定对象ID至vm.basePersonelId而非整个对象

嘿，这个问题我之前也碰到过，ui-select默认会把整个选中对象绑定到ng-model，但要把ID单独存入vm.basePersonelId其实有两种很实用的方法，你可以根据自己的需求来选：

方法一：直接通过repeat语法绑定ID到ng-model #

这种方法适合你只需要存储ID，同时又能正常显示人员信息的场景。核心是在ui-select-choices的repeat属性里指定要绑定的值为人员ID：

<ui-select ng-model="vm.basePersonelId" theme="bootstrap">
  <!-- 选中后显示的内容 -->
  <ui-select-match placeholder="请选择人员">{{$select.selected.name}}</ui-select-match>
  
  <!-- 下拉选项列表 -->
  <ui-select-choices repeat="person.id as person in vm.personnelList track by person.id">
    <div ng-bind-html="person.name | highlight: $select.search"></div>
    <small>{{person.department}}</small>
  </ui-select-choices>
</ui-select>

关键解释： #

• repeat="person.id as person in vm.personnelList"：这里的person.id就是最终会绑定到vm.basePersonelId的值，而person只是用来渲染下拉选项和选中显示的对象。
• track by person.id：确保每个选项的唯一性，避免重复渲染或选中异常的问题。

方法二：通过on-select事件手动赋值ID #

如果你需要同时保留选中的完整对象（比如要在页面其他地方显示该人员的更多信息），可以用on-select事件来触发ID的赋值：

模板部分： #

<ui-select ng-model="vm.selectedPerson" theme="bootstrap" on-select="vm.setPersonelId($item)">
  <ui-select-match placeholder="请选择人员">{{$select.selected.name}}</ui-select-match>
  <ui-select-choices repeat="person in vm.personnelList track by person.id">
    <div ng-bind-html="person.name | highlight: $select.search"></div>
    <small>{{person.department}}</small>
  </ui-select-choices>
</ui-select>

控制器部分： #

// 定义触发选中时的方法
vm.setPersonelId = function(selectedPerson) {
  vm.basePersonelId = selectedPerson.id;
};

关键解释： #

• ng-model="vm.selectedPerson"：绑定完整的选中对象，方便后续使用人员的其他属性。
• on-select="vm.setPersonelId($item)"：当用户选中某个选项时，$item会传入当前选中的人员对象，在方法里把ID赋值给vm.basePersonelId。

如果是多选场景，只需要把ng-model改成数组：方法一的repeat保持person.id as person ...，vm.basePersonelId就会变成存储多个ID的数组；方法二里的$item会变成选中的对象数组，你可以遍历提取ID存入vm.basePersonelId。

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