根據元素數增加計數器

Question

我有一個下面的代碼片段，用於顯示TABS，它是靜態HTML。 但是，基於某些業務邏輯，每個項目都會在UI上顯示。 根據選項卡的數量，我需要設置寬度。 例如，如果顯示兩個選項卡，那么我需要將選項卡等分，即50％。 如果是三分，則為33.3％。

 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
 </ul>

使用“ ng-class”，我可以添加運行時類以應用寬度，但是由於我需要在ng-class中應用相同的業務邏輯，因此增加了復雜性並殺死了頁面。

相反，我試圖使用ng-init來獲取計數以檢查形成了多少個標簽。

 <ul ng-init="totalTabs=0">
    <li ng-init="totalTabs=totalTabs+1">1</li>
    <li ng-init="totalTabs=totalTabs+1">2</li>
    <li ng-init="totalTabs=totalTabs+1">3</li>
    <li ng-init="totalTabs=totalTabs+1">4</li>
</ul>

這沒有給我期望的數量。 您有什么線索或建議嗎？

Answer 1

現在該使用CSS3的一些新功能了。 如果您不知道，會有一個名為flex的新顯示。 它允許很多東西，其中之一是根據元素的父元素的寬度為元素賦予相同的寬度。

您可以在此處找到快速教程 ，或者如果想快速學習：

ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    align-content: flex-start;
    li {
        flex: 1 1 auto;
    }
}