根据元素数量增加计数器

Question

我有一个下面的代码片段，用于显示静态的 TABS HTML。但是每个项目都会根据某些业务逻辑显示在 UI 上。根据我需要设置宽度的选项卡数量。例如，如果显示两个选项卡，那么我需要平均划分选项卡，即 50%。三个的时候就是33.3%。

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

使用 'ng-class' 我可以添加运行时 classes 来应用宽度，但它增加了复杂性并终止了页面，因为我需要在 ng-[=22= 中应用相同的业务逻辑].

相反，我试图使用 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 的新显示。它允许做很多事情，其中之一就是根据父元素的宽度为元素赋予相同的宽度。

你可以找一个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;
    }
}

根据元素数量增加计数器

Increment a counter based on number of elements

angularjs

angularjs-scope

angularjs-ng-init