Select2与AngularJS结合异常，选中项显示不符问题求助

我之前也碰到过一模一样的问题！这种首次选择正常、后续选择出现索引偏移的情况，本质是AngularJS的双向绑定机制和Select2的独立DOM操作没有同步好导致的。Select2会自己维护一份选项的内部缓存，如果Angular更新了选项列表但Select2没及时刷新，就会出现选择的索引和实际显示内容不匹配的情况。

下面是我亲测有效的解决步骤：

1. 用自定义Angular指令封装Select2 #

直接在控制器里操作Select2很容易和Angular的生命周期冲突，最好写一个专用指令来同步两者的状态：

angular.module('yourApp').directive('select2', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      // 初始化Select2
      element.select2({
        placeholder: '请选择',
        // 其他配置项按需添加
      });

      // 同步Angular模型到Select2
      ngModel.$render = function() {
        element.val(ngModel.$viewValue).trigger('change');
      };

      // 同步Select2选择到Angular模型
      element.on('change', function() {
        scope.$apply(function() {
          ngModel.$setViewValue(element.val());
        });
      });

      // 监听选项列表变化，自动刷新Select2
      if (attrs.ngOptions) {
        // 提取ng-options对应的数据源表达式
        var optionsSource = attrs.ngOptions.split(' ').pop();
        scope.$watchCollection(optionsSource, function() {
          // 用setTimeout确保DOM更新完成后再刷新
          setTimeout(function() {
            element.select2('destroy').select2();
          }, 0);
        });
      }
    }
  };
});

之后在HTML里直接给select标签加select2属性即可：

<select ng-model="selectedValue" ng-options="item.id as item.name for item in optionsList" select2></select>

2. 用track by确保选项跟踪的唯一性 #

如果你的选项列表是动态的，一定要在ng-options里加上track by，让Angular根据唯一标识（比如ID）跟踪选项，而不是依赖DOM中的索引位置：

<select ng-model="selectedValue" ng-options="item.id as item.name for item in optionsList track by item.id" select2></select>

这一步能避免因为选项顺序变化、新增/删除选项导致的索引错位问题。

3. 异步加载数据时手动刷新Select2 #

如果你的选项数据是通过AJAX异步获取的，要在数据加载完成后，等待Angular更新DOM后再刷新Select2：

$http.get('/api/getOptions').then(function(response) {
  $scope.optionsList = response.data;
  // 用$timeout确保DOM渲染完成
  $timeout(function() {
    element.select2('refresh');
  });
});

按照这几步操作，基本就能解决你遇到的索引偏移问题了，核心就是让Angular和Select2的状态始终保持同步，不要让Select2的缓存和实际DOM中的选项脱节。

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