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

我正在創建一個從服務器加載大量過濾器的動態頁面。我只想在所有服務器端呼叫完成后才顯示這些過濾器。為此，我使用了一個簡單的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為（第 28 行）。 我認為問題可能是我在之前初始化 select2 select 但如果我在之前或之后執行它并不會改變。false$scope.filtersDonetrue
$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 組件分解）：

有什么建議嗎？

uj5u.com熱心網友回復：

當 ng-show 設定為 false 時，該元素在要操作的頁面中不可用，因為 angular 使用 CSS 將其隱藏：“display: none !important”

因此，您可以使用類或樣式指令代替 ng-show，通過使用 CSS 可見性或不透明度規則來隱藏元素。

這可確保元素在頁面中呈現，即使它不可見。

基本上替換這個：

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

有了這個：

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

標籤：javascript angularjs jQuery-select2

上一篇：如何在jsoneditor中將代碼視圖設定為默認而不是樹

下一篇：如何使用moment.js檢查時間是否在給定范圍之間？