要素数に基づいてカウンターを増やす

Question

静的なHTMLであるTABSを表示するためのコードスニペットがあります。しかし、各項目は、いくつかのビジネスロジックに基づいてUIに表示されます。タブの数に基づいて、幅を設定する必要があります。たとえば、2つのタブが表示されている場合、タブを50％に均等に分割する必要があります。 3つの場合、33.3％になります。 「NG-クラス」を使用して

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

私は幅を適用するには、ランタイム・クラスを追加することができますが、その複雑さを増し、私はNG-クラスで同じビジネスロジックを適用する必要があるとして、ページを殺します。

むしろ、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の新機能をいくつか使用します。あなたがそれを知らない場合、フレックスと呼ばれる新しいディスプレイがあります。それは多くのことを可能にし、その1つは、親の幅に基づいて要素に同じ幅を与えることです。

あなたはquick tutorial hereを見つけることができる、またはあなたが速いようにしたい場合：

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