根據元素數量遞增計數器

我有一個用於顯示靜態HTML的TABS的片段。但是每個項目都會根據一些業務邏輯顯示在用戶界面上。根據我需要設置寬度的選項卡數量。例如，如果顯示兩個標籤，那麼我需要平均分配標籤，即50％。當三個時，它將是33.3％。根據元素數量遞增計數器

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

使用「納克級」我可以添加運行時類應用的寬度，但其增加了複雜性和查殺頁面，因爲我需要將相同的業務邏輯納克級。

相反，我試圖使用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>

這不給我預期的計數。你有任何線索或建議嗎？

來源

2017-07-04 Robin

，你可以根據$指數計數。 – Vivz

我不使用ng-repeat ..這是一個靜態html。 – Robin

如果這是靜態html，那麼你可以通過正常的方式添加css來處理它 – Vivz

現在是時候使用CSS3的一些新功能了。如果你不知道它，有一個新的顯示器叫做flex。它允許很多事情，其中之一是根據父母的寬度爲元素賦予相同的寬度。

你可以找到一個quick tutorial here，或者如果你想快：如果您正在使用NG-重複

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

來源

2017-07-04 13:47:00 trichetriche

根據元素數量遞增計數器

回答

相關問題