Select2+Angular下拉框选中值异常：附带number前缀问题

问题根源 #

这是AngularJS的ngModel与Select2的类型处理机制冲突导致的：当绑定的TrailerID为数值类型时，Select2在序列化选中值时会自动添加类型标识前缀（如number:），而AngularJS未自动识别处理该格式，最终导致模型值带上了多余前缀。

解决方案 #

1. 统一数据源的类型

先检查trailerNos数组，确保每个项的TrailerID是数字类型而非字符串。如果后端返回的是字符串格式，先做类型转换：

// 获取trailerNos数据后执行转换
trailerNos.forEach(item => {
  item.TrailerID = parseInt(item.TrailerID, 10);
});

2. 用指令拦截值的转换

通过AngularJS自定义指令，拦截ngModel的数据流，自动剥离前缀并转换类型：

angular.module('你的项目模块名').directive('select5', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      // 初始化Select2
      element.select2();

      // 处理从Select2到ngModel的值：去掉number:前缀并转成数字
      ngModel.$parsers.push(function(value) {
        if (typeof value === 'string' && value.startsWith('number:')) {
          return parseInt(value.split(':')[1], 10);
        }
        return value;
      });

      // 处理从ngModel到Select2的值：确保输出数字类型
      ngModel.$formatters.push(function(value) {
        return typeof value === 'number' ? value : parseInt(value, 10) || null;
      });
    }
  };
});

3. 延迟Select2初始化时机

如果是因为Select2初始化过早（Angular还未渲染完下拉选项）导致的类型混乱，用$timeout延迟初始化：

// 在控制器中执行
$timeout(function() {
  $('#ddlTripTrailerNo').select2();
});

4. 优化ng-options写法（可选）

若上述方法无效，可给ng-options添加track by明确绑定标识：

<select id="ddlTripTrailerNo" class="select5"
        ng-model="result.TripDetails.TrailerID"
        ng-options="option.TrailerID as option.TrailerNo for option in trailerNos track by option.TrailerID">
  <option disabled="disabled" value="any">Choose a Subject</option>
</select>

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