AngularJS，使用 ng-show 会破坏 select2 的布局

Question

我正在创建一个从服务器加载大量过滤器的动态页面。我只想在所有服务器端调用完成后才显示这些过滤器。为此，我使用了一个简单的 true/false 变量（ng-show="filtersDone"，第 11 行）。

<div class="row">
    <div class="col-sm-11 col-sm-offset-1 table_padding_content">
        <div class="panel panel-default">
            <div class="panel-heading text-center">
                <span><strong> Planning - Details </strong></span>
                <div class="clearfix"></div>
            </div>
            <div class="panel-body">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="row" ng-show="filtersDone">
                            <div class="form-group col-sm-1">
                                <label for="searchFilters.year" class="control-label">Year</label>
                                <select class="form-control" ng-model="searchFilters.year" ng-options="y as y for y in yearsList"></select>
                            </div>

                            <div class="form-group col-sm-2">
                                <label for="searchFilters.dealer" class="control-label">Dealers</label>
                                <select class="form-control" ng-model="searchFilters.dealer" ng-options="dealer.ID as dealer.Name for dealer in dealers"><option></option></select>
                            </div>

                            <div class="form-group col-sm-2">
                                <label for="searchFilters.planningStatus" class="control-label">Planning Status</label>
                                <select class="form-control" ng-model="searchFilters.planningStatus">
                                    <option></option>
                                    <option value="1">Started</option>
                                    <option value="2">Compiled</option>
                                    <option value="3">Archived</option>
                                </select>
                            </div>

                            <div class="form-group col-sm-3">
                                <label for="searchFilters.buildingType" class="control-label">Building Type</label>
                                <select class="form-control" ng-model="searchFilters.buildingType" id="select2_buildingType" name="searchFilters.buildingType"
                                        multiple="multiple" ng-options="item.ID as item.Name for item in buildingTypes">
                                </select>
                            </div>

                            <div class="form-group col-sm-2">
                                <label for="searchFilters.buildingCategory" class="control-label">Building Category</label>
                                <select class="form-control" ng-model="searchFilters.buildingCategory" id="select2_buildingCategory" name="searchFilters.buildingCategory" 
                                        multiple="multiple" ng-options="item.ID as item.Category for item in buildingCategories">
                                </select>
                            </div>

                            <div class="form-group col-sm-2">
                                <div class="pull-right">
                                    <label class="control-label" style="width: 100%">&nbsp;</label>
                                    <button type="button" class="btn btn-default" ng-click="search()">Search</button>
                                    <button type="button" class="btn btn-default" ng-click="clean()">Clean</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是过滤器控制器的一部分。 $scope.filtersDone 在函数的开头设置为 false，然后我调用所有服务器端函数来获取所有 select 值，然后，当一切都完成后，我设置 $scope.filtersDone 到 true（第 28 行）。
我认为问题可能是我在 $scope.filtersDone = true; 之前初始化 select2 select 但如果我在 $scope.filtersDone = true; 之前或之后进行初始化，它不会改变。

$scope.init = function () {
  $scope.filtersDone = false;

  apiCustomService.defaultYear.get(function (res) {
    $scope.currentYear = res.value;

    $scope.yearsList = [];
    const currentYear = new Date().getFullYear();
    for (i = 0; i < 15; i++) {
      $scope.yearsList.push(currentYear - i);
    }

    apiCustomService.dealersGet.get(function(dealers) {
      $scope.dealers = dealers;
      apiCustomService.operaType.get(function(buildingTypes) {
        $scope.buildingTypes = buildingTypes;
        apiCustomService.operaCategory.get(function(buildingCategories) {
          $scope.buildingCategories = buildingCategories;
          apiCustomService.inspectionTypes.get(function(inspectionTypes) {
            $scope.inspectionTypes = inspectionTypes;
            apiCustomService.getListOfValues.get(function(listOfValues) {
              $scope.listOfValues = listOfValues;
              apiCustomService.getAllBuildingCodes.get(function(buildingCodes) {
                $scope.buildingCodes = buildingCodes.codes;

                $scope.searchFilters = {year: $scope.currentYear};

                $scope.filtersDone = true;

                jQuery('#select2_buildingType').select2({
                  multiple: true,
                  placeholder: " ",
                  allowClear: true,
                  language: 'it'
                });

                jQuery('#select2_buildingCategory').select2({
                  multiple: true,
                  placeholder: " ",
                  allowClear: true,
                  language: 'it'
                });
              });
            });
          });
        });
      });
    });
  });
}

$scope.init();

如果我不使用 ng-show="filtersDone"，这是（正确的）情况：

但如果我使用它，情况就是这样（布局仅针对 select2 个组件分解）：

有什么建议吗？

Answer 1

当ng-show设置为false时，该元素在要操作的页面中不可用，因为angular使用CSS隐藏它：“显示：none !重要

因此，您可以使用 class 或样式指令，通过使用 CSS 可见性或不透明度规则来隐藏元素，而不是 ng-show。

这确保元素在页面中呈现，即使它不可见。

基本替换为：

<div class="row" ng-show="filtersDone">

有了这个：

<div class="row" ng-style="{'opacity': filtersDone ? '1' : '0' }">

AngularJS，使用 ng-show 会破坏 select2 的布局

AngularJS, using ng-show breaks select2's layout

javascript

angularjs

jquery-select2