千萬不要同時顯示兩個div

我正在開發一個項目，由於css文件的加載方式，ng-cloak不可用，所以我正在尋找一個不太糟糕的解決方案，並嘗試了一些不同的方法的東西。千萬不要同時顯示兩個div

我從不想同時顯示這兩個圖標。問題在於，由於數據源的承諾仍在解決，所以最下面一個（角度正確）顯示出來了。我怎樣才能確保這兩個圖標永遠不會出現？

<i class=" fa invalid-data-icon fa-angle-down" ng-hide="vm.hideInvalid" 
          ng-show="vm.data.datasources.length"> 
</i> 

<i class="fa invalid-data-icon fa-angle-right" ng-show="vm.hideInvalid" 
          ng-hide="vm.data.datasources.length"> 
</i>

編輯：

去與這個來自接受的答案：

<i class=" fa invalid-data-icon fa-angle-down" ng-class="{'rotate-icon':vm.data.datasources[1].length==0 || vm.hideInvalid}"></i>

來源

2016-03-18 devdropper87

替代做法：僅使用一個圖標在您的代碼，並用CSS類旋轉它：

<i class=" fa invalid-data-icon fa-angle-down" ng-class={'rotate-icon':!!vm.data.datasources.length}></i>

（我的角度技能有點生疏，但你的JIST ...）

然後在你的CSS，像這樣：

.rotate-icon { 
    transform: rotate(-90deg) 
}

來源

2016-03-18 12:43:17 dannyjolie

這是一個真棒答案，decluttered我的代碼大的時間。顯然框架/語言不是你的障礙:) – devdropper87

哈哈，我不會走那麼遠。 – dannyjolie

首先使用，但NG-秀和NG-隱藏在相同的代碼是一個非常糟糕的主意。

你應該這樣做：

<i class=" fa invalid-data-icon fa-angle-down" 
    ng-show="vm.hideInvalid==false && vm.data.datasources.length==0"> 
</i> 

<i class="fa invalid-data-icon fa-angle-right" 
    ng-show="vm.hideInvalid==true && vm.data.datasources.length==0"> 
</i>

考慮，只要你的承諾沒有resvoled你必須初始化hideInvalid和數據源來定義。

來源

2016-03-18 12:37:14 Walfrat

千萬不要同時顯示兩個div

回答

相關問題