ng-repeat 中的 select2 不起作用。 看片段

Question

我正在嘗試在模態內的 ng-repeat 內使用 select2。 它在 ng-repeat 之外工作正常，但是當我在 ng-repeat 內部使用它時，它顯示為簡單的 select 和選項。 我在片段中復制了我的努力。 請糾正我我在哪里做錯了。 謝謝。

 angular.module("app", []).controller("personController", function($scope,$timeout) { $(document).ready(function() { $timeout(function(){ $(".js-example-basic-multiple").select2({}); $scope.products_info = [ 'Jonathan', 'Nathan', 'Chris', 'Brian', 'Timothy' ]; console.log($scope.products_info.length); }); }); $scope.triger_select2 = function(){ $(".js-example-basic-multiple").select2({}); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> </head> <div ng-app="app"> <div ng-controller="personController"> <.-- Button trigger modal --> <button type="button" ng-click="triger_select2()" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> This button triggers select 2 after ng-repeat loaded; </button> <.-- Modal --> <div class="modal fade bd-example-modal-xl" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-xl" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Add Extras</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times.</span> </button> </div> <div class="modal-body"> <div class="container"> <div class="row"> <div class="col-sm"> This is select2 outside ng-repeat. It is working fine. <select class="js-example-basic-multiple" multiple="multiple" tabindex="-1"> <option value="all" selected="">All Days</option> <option value="AL">06/09/2020</option> <option value="WY">07/09/2020</option> <option value="WY">08/09/2020</option> <option value="WY">09/09/2020</option> </select> </div> </div> <!-- row ends --> <div class="row" ng-repeat="x in products_info"> <div class="col-sm"> This is select2 inside ng-repeat. It is showing as just simple select and options instead of select2. <select class="js-example-basic-multiple" multiple="multiple" tabindex="-1"> <option value="all" selected="">All Days</option> <option value="AL">06/09/2020</option> <option value="WY">07/09/2020</option> <option value="WY">08/09/2020</option> <option value="WY">09/09/2020</option> </select> </div> </div> <!-- ng-repeat rows end --> </div> <!-- container ends --> </div> </div> </div> </div> </div> </div>

我也嘗試過“選擇”，但 android 不支持它:(

更新：我找到了解決方案：我在調用 function 加載 ng-repeat 后觸發了 select 2。 我們也可以設置 timeout function 來觸發這個 --> $(".js-example-basic-multiple").select2({});

感謝大家。

Answer 1

更新：我找到了解決方案：我在調用 function 加載 ng-repeat 后觸發了 select 2。 我們也可以設置 timeout function 來觸發這個 --> $(".js-example-basic-multiple").select2({});

請參閱我編輯帖子的片段。