ng-repeat里面的select2不能用，请看这段话。

Question

我试图在模态内的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/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 :(

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

谢谢大家。

Answer 1

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

见我编辑的帖子的片段。