AngularJS中使用Select2选择新增选项后触发change事件的方法

我明白你遇到的困扰：当用Select2的标签功能新增选项时，ng-change总是先于select2:select触发，导致拿不到选中新增选项后的最新ngModel值。这是因为AngularJS的ng-change绑定在ngModel视图值变化的早期阶段，而Select2的自定义事件是在DOM交互完成后才触发，两者的事件循环不同步导致的冲突。

下面是针对性的解决方案，我们会调整指令逻辑，确保在Select2事件完全处理完成后再触发你的onChange回调：

步骤1：调整模板，移除ng-change #

先去掉模板里的ng-change指令，避免和我们手动触发的回调产生冲突：

<select custom-select2 id="items" ng-model="items" class="form-control">
 <option ng-repeat="item in itemlist" value="{{ item.id }}"> {{ item.name }} </option>
</select>

步骤2：修正Controller中的itemlist类型 #

你的itemlist应该定义为数组而非对象，否则push方法会报错：

let app= angular.module("app",[]);
app.controller('itemAddController',function($scope, $http){
 $scope.itemlist= []; // 改为数组类型
 $scope.onChange = (selectedValue) => {
 console.log("最新选中值：", selectedValue);
 }
});

步骤3：更新自定义Select2指令 #

调整指令逻辑，在select2:select和select2:unselect事件中，先完成ngModel的更新，再手动触发onChange回调，同时用$apply确保Angular感知到数据变化：

app.directive('customSelect2', function($timeout) {
 return {
 restrict: 'A',
 require: 'ngModel',
 link: function(scope, element, attr, ngModel) {
 $timeout( function(){
 element.select2({
 allowClear:true,
 tags: true,
 tokenSeparators: [",",";"],
 createTag: function (params) {
 let term = $.trim(params.term);
 if (term === '') {
 return null;
 }
 // 保持和原有item结构一致（id+text），方便后续渲染
 return {
 id: term,
 text: term,
 newTag: true
 };
 }
 })
 // 处理选择事件（包含新增标签场景）
 .on("select2:select", function(e) {
 const selectedData = e.params.data;
 if(selectedData.newTag){
 // 将新标签加入itemlist，确保下次下拉能显示该选项
 scope.itemlist.push({
 id: selectedData.id,
 name: selectedData.text
 });
 }
 // 更新ngModel的视图值
 ngModel.$setViewValue(selectedData.id);
 // 触发onChange，并用$apply强制Angular执行消化周期
 scope.$apply(function() {
 scope.onChange(selectedData.id);
 });
 })
 // 处理取消选择事件
 .on("select2:unselect", function() {
 ngModel.$setViewValue(null);
 scope.$apply(function() {
 scope.onChange(null);
 });
 });
 },200);
 }
}
});

逻辑说明 #

• 我们直接在Select2的原生事件中处理数据更新和回调触发，完全掌控事件顺序，避免了Angular原生指令和jQuery组件的事件冲突。
• $apply方法强制Angular执行一次消化周期，确保所有数据变化被正确检测，视图和模型保持同步。
• 新增标签时同步更新itemlist，保证下次下拉时能看到刚添加的选项。

这样修改后，无论是选择已有选项还是新增标签，onChange都会在Select2事件完成后触发，你就能获取到最新的选中值了。

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