Html / AngularJs - 使按钮全宽

Question

我正在使用 angularJs 开发应用程序，我必须创建一些按钮，这是我创建它们的方法：

<div class="btn-group-view col-md-12 col-sm-12" role="group" aria-label="Basic example">

    <button class="btn btn-selection col-md-4 col-sm-4" ng-click="selectView('raw'); selectTab('raw');" ng-class="{'active':selectedTab === 'raw'}">Raw data</button>
    <button class="btn btn-selection col-md-4 col-sm-4" ng-click="selectView('summary'); selectTab('summary');" ng-class="{'active':selectedTab === 'summary'}">Summary</button>

    <button class="btn btn-selection col-md-4 col-sm-4" ng-repeat="(key, value) in views" ng-click="selectView(key); selectTab(key);" ng-class="{'active':selectedTab === key}">
        {{ key }}
    </button>
</div>

所以我的容器是 col-md-12，按钮是 col-md-4，每行可以是 3 个。

我想做的事情是，例如，如果有 4 个按钮，最后一个占据他的行的整个宽度，如果有 5 个按钮，最后两个占据宽度的 50% 和 50%。

我不知道如何做到这一点，我认为可以使用 html 模板上的 if 语句来检查按钮的数量，但我不知道如何在 AngularJs 中做到这一点。

Answer 1

您可以创建一个计算按钮数量的函数，这意味着您知道按钮的数量及其位置：

function getButtonClass(indexOfButton ) {
    if(numberOfButtons % 3 === 2 && (indexOfButton ===  numberOfButtons || indexOfButton ===  numberOfButtons - 1)){
        return 'col-md-6';
    }
    if(numberOfButtons % 3 === 1 && (indexOfButton ===  numberOfButtons)){
        return 'col-md-12';
    }
    return 'col-md-4';
}

该函数计算模数，如果为2，则表示最后一行将有2个元素，如果为1，则将有一个元素，依此类推。使用索引，因此仅影响最后一行。

一旦你绑定到作用域（或控制器，如果你使用控制器语法），你可以这样调用它：

 <button class="btn btn-selection" ng-class="getButtonClass(indexOfButton)">

这只是部分答案，因为我没有所有元素可以为您提供更完整的答案。这是为了让您了解如何做到这一点。