You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

AngularJS中使用ng-options时如何在ng-change获取选中项的id属性

解决方案

你无需修改现有ng-options配置和ng-model绑定逻辑,直接通过已绑定的name值匹配原数据源即可拿到对应id,操作步骤如下:

  • 第一步:给select标签的ng-change事件传入当前绑定的ng-model值,示例HTML结构如下:
<select 
  ng-model="selectedName"
  ng-options="item.name as item.name for item in myObj"
  ng-change="handleChange(selectedName)"
>
</select>
  • 第二步:在控制器中定义handleChange方法,用传入的name值遍历原数据源myObj匹配对应条目,即可获取id:
$scope.handleChange = function(selectedName) {
  // 从原数组中匹配name对应的条目
  const selectedItem = $scope.myObj.find(item => item.name === selectedName);
  if (selectedItem) {
    const selectedId = selectedItem.id;
    // 此处写拿到id后的业务逻辑
    console.log('选中项id为:', selectedId);
  }
}

注意:该方案的前提是数据源中的name字段为唯一值,若存在重名情况,你原有ng-options的绑定逻辑本身也会出现选中项匹配错误的问题,需先保证name字段唯一性。

内容的提问来源于stack exchange,提问作者Reverend Bubbles

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.03 08:45:00