根据元素数量增加计数器答案

【问题标题】：Increment a counter based on number of elements根据元素数量增加计数器
【发布时间】：2017-07-04 13:32:03
【问题描述】：

我有一个下面的 sn-p 用于显示静态 HTML 的 TABS。但是每个项目都会根据一些业务逻辑显示在 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>

这并没有给我预期的计数。你有什么线索或建议吗？

【问题讨论】：

如果你使用的是 ng-repeat，你可以根据 $index 获取计数。
我没有使用 ng-repeat.. 这是一个静态 html。
如果是静态html，那么你可以添加css正常处理

标签： angularjs angularjs-scope angularjs-ng-init

【解决方案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;
    }
}

【讨论】：