Inkrementieren Sie einen Zähler basierend auf der Anzahl der Elemente

Question

Ich habe einen unteren Ausschnitt für TABS, die statische HTML ist. Aber jedes Element würde basierend auf einer Geschäftslogik auf der Benutzeroberfläche angezeigt werden. Basierend auf der Anzahl der Tabs muss ich eine Breite festlegen. Wenn z.B. zwei Registerkarten gezeigt werden, dann muss ich die Registerkarten gleichmßig teilen, d.h. 50%. wenn drei, wird es 33,3% sein.

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

‚ng-Klasse‘ Verwendung von I-Laufzeitklassen hinzufügen kann, um die Breite gelten, aber seine Komplexität zu erhöhen und die Tötung die Seite als ich die gleiche Geschäftslogik in ng-Klasse anwenden muß.

Eher versuchte ich, ng-init zu verwenden, um die Anzahl zu überprüfen, wie viele Registerkarten gebildet werden.

<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> 

Dies gibt mir nicht die erwartete Anzahl. Hast du irgendwelche Hinweise oder Vorschläge?

Answer 1

Es ist Zeit, einige neue Funktionen von CSS3 zu verwenden. Falls Sie es nicht wissen, gibt es ein neues Display namens flex. Es erlaubt viele Dinge, und einer von ihnen ist es, Elementen die gleiche Breite zu geben, basierend auf der Breite ihrer Eltern.

Sie können eine quick tutorial here finden, oder wenn Sie schneller sein möchten:

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