Zack Lucky
Zack Lucky

Reputation: 671

Angular ng-click function not being entered when called

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

Answers (1)

byteC0de
byteC0de

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

Related Questions