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，将有一个元素，以此类推。使用索引，因此仅影响最后一行。 / p>

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

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

这只是部分答案，因为我没有所有要素可以为您提供更完整的答案。这是让您了解如何实现的方法。

HTML / AngularJs-使按钮全宽

1 个答案: