AngularJS绑定接口数据时Bootstrap Multiselect失效求助

我帮你排查了一下，导致Bootstrap Multiselect组件在异步数据绑定后失效的核心原因有两个，下面是具体的修复步骤和代码示例：

问题根源 #

1. 重复ID冲突：你页面里的两个<select>都用了id="multiselect"，jQuery选择器只会匹配第一个元素，第二个下拉框根本没被初始化。
2. 异步数据加载时机不匹配：Bootstrap Multiselect是在页面DOM加载完成后初始化的，但$http请求是异步的——当接口数据返回并渲染到页面时，插件已经完成初始化了，新生成的<option>不会被插件识别，所以只能显示原生的多选框样式。

修复步骤 #

1. 给下拉框设置唯一ID #

把两个<select>的ID改成不同的，比如第一个叫multiselect-static，第二个叫multiselect-api。

2. 在异步数据加载完成后初始化插件 #

把插件的初始化逻辑移到Angular控制器的$http回调里，确保数据渲染到DOM后再初始化插件。如果需要重复加载数据，记得先销毁已有插件实例再重新初始化。

3. 修正数据绑定路径 #

接口返回的结构是{data: [...]}，所以要把列表数据赋值给单独的变量，避免和其他数据混淆。

修改后的完整代码 #

JavaScript部分（mj.js） #

angular.module('ngvalueSelect', [])
.controller('ExampleController', ['$scope','$http', function($scope,$http) {
    // 静态数据
    $scope.data = {
        availableOptions: [
            {value: '001', name: 'Hello'},
            {value: '002', name: 'integer'},
        ]
    };

    // 异步加载API数据
    $http.get('https://reqres.in/api/unknown')
    .then(function (result) {
        // 把接口返回的列表数据赋值给单独变量
        $scope.data.apiOptions = result.data.data;
        
        // 等待DOM渲染完成后初始化API对应的多选插件
        setTimeout(function() {
            // 先销毁可能存在的实例，再重新初始化
            $('#multiselect-api').multiselect('destroy').multiselect();
        }, 0);
    });

    // 页面加载完成后初始化静态数据的多选插件
    setTimeout(function() {
        $('#multiselect-static').multiselect();
    }, 0);
}]);

HTML部分 #

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script type="text/javascript" src="mj.js"></script>
</head>
<body ng-app="ngvalueSelect">
    <div ng-controller="ExampleController">
        <form name="myForm">
            <label for="multiselect-static">静态数据多选框: </label>
            <select name="ngvalueselect" ng-model="data.staticModel" id="multiselect-static" multiple="multiple">
                <option ng-repeat="option in data.availableOptions" ng-value="option.value">{{option.value}}-{{option.name}}</option>
            </select>
        </form>
        <hr>
        <pre>静态数据model = {{data.staticModel | json}}</pre>
        <br/>

        <form name="myForm2">
            <label for="multiselect-api">API数据多选框: </label>
            <select name="ngvalueselect-api" ng-model="data.apiModel" id="multiselect-api" multiple="multiple">
                <option ng-repeat="option in data.apiOptions" ng-value="option.name">{{option.name}}</option>
            </select>
        </form>
        <hr>
        <pre>API数据model = {{data.apiModel | json}}</pre>
        <br/>
    </div>
</body>
<!-- 移除原来的全局初始化代码，移到控制器里处理 -->
</html>

额外建议 #

• 尽量避免AngularJS和jQuery直接混用，推荐使用专门为Angular封装的多选组件，这样能更好地适配Angular的生命周期，避免DOM操作时机的问题。
• 如果必须用jQuery插件，记得在Angular的$timeout或者setTimeout里执行初始化，确保Angular已经完成了DOM渲染。

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