我试图在模态内的ng-repeat中使用select2,它在ng-repeat外运行良好,但在ng-repeat内使用时,却显示为简单的选择和选项。它在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">×</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 :(
更新:我找到了解决方案。我通过调用函数在ng-repeat加载后触发了select 2。我们也可以放超时函数来触发这个--> $(".js-example-basic-multiple").select2({})。
谢谢大家。
更新:我找到了解决方案。我在ng-repeat加载后通过调用函数触发了选择2。我们也可以放超时函数来触发这个--> $(".js-example-basic-multiple").select2({})。
见我编辑的帖子的片段。