AngularJS中ng-model将字典转为字符串问题咨询（带代码示例）

嘿，这个坑我之前踩过！你现在用ng-repeat渲染<option>的时候，直接把整个role对象绑定到value属性，而HTML的<option>的value只能存字符串，所以AngularJS会把对象转成[object Object]这种字符串，导致ng-model拿到的不是预期的对象。给你两个实用的解决方案：

方案1：用ng-options替代ng-repeat（官方推荐） #

这是最省心的方式，AngularJS专门提供了ng-options指令来处理下拉框的对象绑定，完全避免字符串转换的问题。修改后的代码如下：

<select class="form-control" id="role_list" ng-model="dialogdata.role" multiple 
        ng-options="role as role.name for role in roles">
</select>

语法解释： #

• role as role.name：前面的role是最终绑定到ng-model的对象，后面的role.name是下拉框里显示的文本内容
• for role in roles：遍历你的roles数组生成选项

这样选中后，dialogdata.role直接就是你选中的role对象数组，完全不用处理字符串转换的问题。

方案2：如果坚持用ng-repeat，手动映射ID到对象 #

要是因为某些原因必须用ng-repeat，那可以把对象的id作为value，然后在控制器里把选中的ID数组转成对应的对象数组：

首先修改HTML：

<select class="form-control" id="role_list" ng-model="selectedRoleIds" multiple>
  <option ng-repeat="role in roles" value="{{role.id}}">{{role.name}}</option>
</select>

然后在控制器里添加监听逻辑：

// 监听选中的ID数组变化，转成对象数组
$scope.$watch('selectedRoleIds', function(newSelectedIds) {
  if (newSelectedIds) {
    // 注意：select的value是字符串，所以要把role.id转成字符串做匹配
    $scope.dialogdata.role = $scope.roles.filter(role => {
      return newSelectedIds.includes(role.id.toString());
    });
  }
}, true); // 第三个参数true表示监听数组内部元素的变化

小提醒 #

优先选方案1哦，ng-options不仅能完美解决对象绑定问题，还能避免ng-repeat渲染下拉框时可能出现的重复渲染、性能损耗等小问题，是AngularJS处理下拉框的标准姿势~

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