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

Posted 2023-05-07

【中文标题】ng-repeat 中的 select2 不起作用。看片段

【英文标题】：select2 inside ng-repeat is not working. see the snippet

【发布时间】：2020-09-30 12:35:57

【问题描述】：

我正在尝试在模态中的 ng-repeat 中使用 select2。它在 ng-repeat 之外工作正常，但是当我在 ng-repeat 内部使用它时，它显示为简单的选择和选项。 我在 sn-p 中重现了我的努力。请纠正我我在哪里做错了。谢谢。

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 不支持它:(

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

谢谢大家。

【参考方案1】：

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

查看我编辑帖子的 sn-p。