Angular ng-click function not being entered when called

Question

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

do you mean copy paste it into the li and delete the old one or something different? <html> ng-controller= "navController as navCtrl" <js> .controller('navController', ['$scope', function($scope) { — Zack Lucky
– Zack Lucky, Commented Apr 28, 2016 at 4:01

byteC0de · Accepted Answer · 2016-04-28 04:07:45Z

2

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>

edited Apr 28, 2016 at 4:07

answered Apr 28, 2016 at 4:01

byteC0de

5,3436 gold badges36 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Zack Lucky Over a year ago

The buttons are activating, but I don't think the select function is being entered

Zack Lucky Over a year ago

I stand corrected. I'll figure out how to implement this, thank you!

Zack Lucky Over a year ago

would you mind looking at this fiddle? jsfiddle.net/hra04ctr/1 I can't seem to get it to change even though filtText changes.

Zack Lucky Over a year ago

I need the filter to properly filter so that for each tab the correct info displays. Currently whatever the base case is stays. I'm not sure if maybe the function is being entered after the filter has already been applied, of course the wouldn't make sense because then it would just appear one behind on the next click.

Collectives™ on Stack Overflow

Angular ng-click function not being entered when called

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related