AngularJS中multi.js多选表格无法自动重绘问题排查

看起来你遇到的核心问题是：multi.js 构建的多选组件在学生列表数据更新后，无法自动感知DOM的变化，必须手动点击才会重绘。这是因为 multi.js 是基于初始DOM结构初始化的，当Angular通过ng-repeat更新学生列表的DOM时，旧的multi实例并没有同步更新，导致组件显示的还是旧数据。

下面是具体的修复步骤和代码修改：

1. 保存multi实例引用，避免重复初始化冲突 #

首先在控制器中添加一个变量来保存multi组件的实例，这样我们可以在需要时销毁旧实例，再重新创建：

.controller('ViewAddTheoryLessonCtrl', ['$http', '$scope', 'AuthService','$window', '$location', '$route','$rootScope', function ($http, $scope, AuthService, $window, $location, $route,$rootScope) {
  var self = this;
  var URL = 'http://localhost:8080';
  $scope.listOfStudents = [];
  this.listOfEmployee = [];
  this.listOfCategories = [];
  // 新增：保存multi组件实例
  this.multiInstance = null;
  // ... 其他代码不变
}])

2. 修改组件初始化方法，支持销毁重建 #

更新createMultiSelectTable方法，先销毁已存在的multi实例，再重新初始化，确保每次都基于最新的DOM构建组件：

this.createMultiSelectTable = function () {
  // 先销毁旧实例，避免冲突
  if (this.multiInstance) {
    this.multiInstance.destroy();
  }
  // 重新初始化并保存实例引用
  this.multiInstance = multi(
    self.select_element,
    {
      'enable_search': true,
      'search_placeholder': '搜索...',
      'non_selected_header': '学员',
      'selected_header': '已选'
    });
};

3. 确保DOM更新完成后再重建组件 #

在获取学生数据的回调中，使用$timeout等待Angular完成数据绑定和DOM更新后，再调用组件重建方法。因为$http是异步操作，数据更新后Angular需要一个digest cycle来更新DOM，直接调用重建会导致组件读取到旧的DOM：

this.getStudentsByCategory = function () {
  $http.get(URL + '/student/getallbycategory?categoryid=' + self.theoryLesson.categoryId)
  .then(function (data) {
    var array = data.data;
    $scope.listOfStudents = [];
    for (var channel in array) {
      if (array[channel].id) {
        $scope.listOfStudents.push(array[channel]);
      }
    }
    console.log($scope.listOfStudents);
    // 等待DOM更新完成后重建组件
    $timeout(function() {
      self.createMultiSelectTable();
    });
  },function (data) {
    console.log(data);
    alertify.error("无法获取学员列表。");
  })
};

4. 移除不必要的提前调用 #

在categoryChange方法中，你原本在调用getStudentsByCategory后立刻执行了createMultiSelectTable，但此时学生数据的请求还未完成，DOM也没更新，所以这行调用是无效的，需要移除：

this.categoryChange = function(){
  $http.get(URL + '/employee/bypermission?categoryid=' + self.theoryLesson.categoryId)
  .then(function (data) {
    var array = data.data;
    self.listOfEmployee = [];
    for (var channel in array) {
      if (array[channel].id) {
        self.listOfEmployee.push(array[channel]);
      }
    }
  },function (data) {
    console.log(data);
    alertify.error("无法获取讲师列表。");
  });
  self.getStudentsByCategory();
  // 移除这行无效调用
  // self.createMultiSelectTable();
};

额外检查：确认HTML的ng-repeat绑定正确 #

确保你的多选下拉框正确绑定了listOfStudents，这样数据更新时DOM才会同步变化：

<select id="selectStudent" multiple>
  <option ng-repeat="student in listOfStudents track by student.id" value="{{student.id}}">{{student.name}}</option>
</select>

这里建议加上track by student.id，提升ng-repeat的性能，避免不必要的DOM销毁重建。

为什么这样能解决问题？ #

• multi.js 组件初始化后会缓存DOM结构，当DOM动态更新时，旧实例无法感知，所以必须销毁旧实例再基于新DOM重建。
• $timeout 会让代码在Angular的digest cycle完成后执行，确保此时学生列表的DOM已经更新完毕，组件能读取到最新的选项。
• 保存实例引用是为了正确销毁旧组件，避免内存泄漏和多个实例同时运行的冲突。

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