AngularJS+Bootstrap Select移动端出现重复选择器问题求助

看起来你遇到的是真实移动端浏览器中Bootstrap Select与AngularJS ng-repeat配合时的重复渲染问题，Chrome设备工具栏因为是模拟环境，和真实移动端的DOM渲染、事件触发逻辑有差异，所以没复现。我之前也碰到过类似的坑，给你几个排查和解决方向：

核心原因推测 #

Bootstrap Select是基于原生select进行DOM改造的插件，而AngularJS的ng-repeat是异步渲染DOM的。在真实移动端，浏览器的渲染速度、事件循环和桌面端/调试器有差异，可能导致Bootstrap Select重复初始化，生成了多份改造后的选择器DOM。

具体解决方案 #

1. 用AngularJS指令封装Bootstrap Select，确保初始化时机正确 #

避免直接在全局调用selectpicker()，而是通过自定义指令，在ng-repeat渲染完成后再初始化，并且防止重复实例化：

angular.module('你的应用模块名').directive('selectpicker', function() {
  return {
    restrict: 'C', // 通过类名触发指令
    link: function(scope, element, attrs) {
      // 监听select下的option数量变化，确保ng-repeat渲染完成
      scope.$watch(
        () => element.children('option').length,
        (newLength) => {
          if (newLength > 0) {
            // 先销毁已存在的实例，避免重复创建
            element.selectpicker('destroy');
            // 初始化Bootstrap Select
            element.selectpicker({
              liveSearch: attrs.liveSearch === 'true'
            });
            // 监听Angular模型变化，同步到Bootstrap Select
            scope.$watch(attrs.ngModel, () => {
              element.selectpicker('refresh');
            });
          }
        }
      );
    }
  };
});

你的HTML代码不需要大改，保持原来的class="form-control selectpicker"即可，指令会自动处理初始化逻辑。

2. 检查全局初始化代码，避免重复调用 #

如果你在页面加载时（比如$(document).ready()）调用了$('.selectpicker').selectpicker()，在移动端可能因为DOM渲染延迟，后续ng-repeat完成后又触发了一次初始化。可以修改全局初始化代码，确保只初始化一次：

// 替换原来的全局初始化
$(document).ready(function() {
  // 先销毁再初始化，防止重复
  $('.selectpicker').selectpicker('destroy').selectpicker();
});

3. 验证Bootstrap Select与AngularJS版本兼容性 #

老版本的Bootstrap Select在和AngularJS配合时，移动端可能存在DOM重复生成的bug。尝试更新Bootstrap Select到最新的稳定版本，同时确保和你使用的AngularJS版本兼容。

4. 检查viewport设置 #

确保页面的viewport meta标签配置正确，避免移动端浏览器的缩放或渲染异常：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

为什么Chrome设备工具栏正常？ #

Chrome设备工具栏是在桌面浏览器环境下模拟移动端，它的DOM渲染速度、事件触发机制和真实移动端浏览器（比如Safari iOS、Chrome Android）有差异，不会出现真实移动端的渲染延迟或重复初始化的情况，所以无法复现问题。

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