CODEWITHSUNDEEP
angularjstwitter-bootstrap
Ahmet Ertan
Ahmet Ertan

Reputation: 113

How to implement the Bootstrap pills active class with Angular

I want to create a set of pills with all the states with their number of electors and I want the pill that is clicked becomes active. So, my unsuccesful attempt for this matter is as follows:

<ul class="nav nav-pills">
    <li ng-class="{ active:tab.isSet(x.name) }" ng-repeat="x in states">
        <a href ng-click="tab.setTab(x.name)">{{x.name}} <span class="badge">{{x.elector}}</span></a>
    </li>
</ul>

And, inside my controller I have this piece of code for that matter:

$scope.tab = "Alabama";

$scope.isSet = function(checkTab) {
    return $scope.tab === checkTab;
};

$scope.setTab = function(activeTab) {
    $scope.tab = activeTab;
};

By the way, at first I tried to make the pills active by comparing their indices but that didn't help. It would be even better if you can help me with a way to do this using the indices. I apologize if there is already a posted solution to this but I couldn't find it.

Thanks in advance!

Upvotes: 0

Views: 951

Answers (2)

Ahmet Ertan
Ahmet Ertan

Reputation: 113

I found it, I should've deleted the "tab"s in "tab.isset(...)".

Upvotes: 1

joncodo
joncodo

Reputation: 2328

<ul class="nav nav-pills">
    <li ng-class="{ 'active':tab.isSet(x.name) }" ng-repeat="x in states">
        <a href ng-click="tab.setTab(x.name)">{{x.name}} <span class="badge">{{x.elector}}</span></a>
    </li>
</ul>

Note the quotes around active

Upvotes: 1

Related Questions