When using select2 inside ng-repeat within a modal, it works fine outside the ng-repeat. However, when placed inside ng-repeat, it appears as a simple select with options instead of a styled select2 dropdown. I have included my code snippet below. Please help me correct where I am going wrong. Thank you.
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/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2/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 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>
<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">×</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>I also attempted to use 'chosen', but unfortunately, it is not supported on Android devices.
Update: I found a solution by triggering select2 after ng-repeat has loaded through a function call. Alternatively, we can use a timeout function to trigger this --> $(".js-example-basic-multiple").select2({});
Thank you to everyone who helped out.