CODEWITHSUNDEEP
htmlangularjstwitter-bootstrap
Spialdor
Spialdor

Reputation: 1645

Html / AngularJs - Make buttons full width

i'm using angularJs to develop an app and I have to create some buttons, here is how I create them :

<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>

So my container is col-md-12 and buttons are col-md-4, they can be 3 on each line.

The thing I want to do is for example if there is 4 button, the last one take the full width of his row, if there is 5 buttons, the two last one take 50% and 50% of the width.

I don't find how to do this, I think it can be done with an if statement on the html template to check the number of buttons but I don't know how to do this in AngularJs.

Upvotes: 0

Views: 42

Answers (1)

Groben
Groben

Reputation: 1386

You could create a function that calculates the number of buttons, it implies that you know the number of buttons and their positions:

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';
}

The function calculates the modulo, if it's 2, it's means there will be 2 elements in your last line, if it's 1, there will be one element, etc. The index is used so only the last line is impacted.

Once you have binded to the scope (or the controller if you use controller syntax) you could call it like that:

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

This is only a partial answer since I don't have all the elements to give you a more complete one. This is to give you an idea of how you could do it.

Upvotes: 1

Related Questions