Reputation: 671
I'm working on some Angular tabs contained in buttons. For some reason the select function isn't being called when they're pressed. So I think the issue has to be in the html. I provided both sets of code where the issue could be.
Html code
<ul>
<li class="navigation-button" role="presentation" ng-class="{active:isSelected(1)}">
<button class="btn-lg btn-primary" ng-click="select(1)" aria-controls="home" role="tab">Home</button>
</li>
<li class="navigation-button" role="presentation" ng-class="{active:isSelected(2)}">
<button class="btn-lg btn-primary" ng-click="select(2)" aria-controls="savings options" role="tab">Savings Options</button>
</li>
<li class="navigation-button" role="presentation" ng-class="{active:isSelected(3)}">
<button class="btn-lg btn-primary" ng-click="select(3)" aria-controls="checking option" role="tab">Checking Options</button>
</li>
<li class="navigation-button" role="presentation" ng-class="{active:isSelected(4)}">
<button class="btn-lg btn-primary" ng-click="select(4)" aria-controls="credit cards" role="tab">Credit Cards</button>
</li>
<li class="navigation-button" role="presentation" ng-class="{active:isSelected(5)}">
<button class="btn-lg btn-primary" ng-click="select(5)" aria-controls="loans" role="tab">Loans</button>
</li>
<li class="navigation-button" role="presentation" ng-class="{active:isSelected(6)}">
<button class="btn-lg btn-primary" ng-click="select(6)" aria-controls="sign in" role="tab">Sign In</button>
</li>
</ul>
angular function
$scope.select = function(setTab) {
$scope.tab = setTab;
if (setTab === 2) {
$scope.filtText = "Savings";
}
else if (setTab === 3) {
$scope.filtText = "Checking";
}
else if (setTab === 4) {
$scope.filtText = "Credit";
}
else if (setTab === 5) {
$scope.filtText = "Loan";
}
else if (setTab === 6) {
$scope.filtText = "Sign";
}
else {
$scope.filtText = "Bank";
}
};
Upvotes: 3
Views: 298
Reputation: 5273
It is already working man
var app = angular.module("mainApp", []);
app.controller('mainCtrl', function($scope){
$scope.select = function(setTab) {
alert("selected");
$scope.tab = setTab;
if (setTab === 2) {
$scope.filtText = "Savings";
}
else if (setTab === 3) {
$scope.filtText = "Checking";
}
else if (setTab === 4) {
$scope.filtText = "Credit";
}
else if (setTab === 5) {
$scope.filtText = "Loan";
}
else if (setTab === 6) {
$scope.filtText = "Sign";
}
else {
$scope.filtText = "Bank";
}
};
});
.active{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
<ul>
<li class="navigation-button" role="presentation" ng-class="{'active':tab == 1}">
<button class="btn-lg btn-primary" ng-click="select(1)" aria-controls="home" role="tab">Home</button>
</li>
<li class="navigation-button" role="presentation" ng-class="{'active':tab == 2}">
<button class="btn-lg btn-primary" ng-click="select(2)" aria-controls="savings options" role="tab">Savings Options</button>
</li>
<li class="navigation-button" role="presentation" ng-class="{'active':tab == 3}">
<button class="btn-lg btn-primary" ng-click="select(3)" aria-controls="checking option" role="tab">Checking Options</button>
</li>
<li class="navigation-button" role="presentation" ng-class="{'active':tab == 4}">
<button class="btn-lg btn-primary" ng-click="select(4)" aria-controls="credit cards" role="tab">Credit Cards</button>
</li>
<li class="navigation-button" role="presentation" ng-class="{'active':tab == 5}">
<button class="btn-lg btn-primary" ng-click="select(5)" aria-controls="loans" role="tab">Loans</button>
</li>
<li class="navigation-button" role="presentation" ng-class="{'active':tab == 6}">
<button class="btn-lg btn-primary" ng-click="select(6)" aria-controls="sign in" role="tab">Sign In</button>
</li>
</ul>
</div>
Upvotes: 2