ng-repeat中的select2不起作用. 请参阅代码段

Question

我正在尝试在 ng-repeatin modal 中使用 select2。它在 ng-repeat 之外工作正常，但是当我在 ng-repeat 内部使用它时，它显示为简单的选择和选项。 我在片段中复制了我的努力。请纠正我哪里做错了。谢谢。

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>

我也尝试了"选择"，但它在安卓:(中不受支持

更新：我找到了解决方案：通过调用函数加载ng重复加载后触发了选择2。我们也可以放超时函数来触发这个 -->$(".js-example-basic-multiple"(.select2({}(;

谢谢大家。

Answer 1

更新：我找到了解决方案：通过调用函数加载 ng 重复加载后，我触发了选择 2。我们也可以放超时函数来触发这个 --> $(".js-example-basic-multiple"(.select2({}(;

请参阅我编辑帖子的代码段。