Angular tab selecting using controller method

Question

I am trying to use AngularJS to display the tab number when certain tab is selected using the controller method. It does not as expected. Greatly appreciate your help on this one.

HTML

<body ng-app="coolApp">
    <section ng-controller="panelSelector as panel">
        <ul class="nav nav-pills">
            <li ng-class="{active:panel.isSet(1)}"><a href ng-click="panel.setTab(1)">Concert Band</a></li>
            <li ng-class="{active:panel.isSet(2)}"><a href ng-click="panel.setTab(2)">Ceremonial Band</a></li>
            <li ng-class="{active:panel.isSet(3)}"><a href ng-click="panel.setTab(3)">191st Jazz Combo</a></li>
            <li ng-class="{active:panel.isSet(4)}"><a href ng-click="panel.setTab(4)">Brass Ensemble</a></li>
            <li ng-class="{active:panel.isSet(5)}"><a href ng-click="panel.setTab(5)">Celtic Fire</a></li>
        </ul>
        <p> the tab number is: {{tab}}</p>
    </section>
</body>

Code

var app = angular.module("coolApp", []);
app.controller("panelSelector", function(){
this.tab = 1; 

this.setTab = function(tabChoice){
    this.tab = tabChoice;
};
this.isSet = function(checkTab){
    return this.tab = checkTab;
};
});

Sudhansu Choudhary · Accepted Answer · 2015-06-25 23:47:31Z

var app = angular.module("coolApp", []);
app.controller("panelSelector", function(){
  var panel = this;
  panel.tab = 1; 

  panel.setTab = function(tabChoice){
      panel.tab = tabChoice;
  };
  panel.isSet = function(checkTab){
      return panel.tab == checkTab;
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<body ng-app="coolApp">
<section ng-controller="panelSelector as panel">
            <ul class = "nav nav-pills">
                <li ng-class="{active:panel.isSet(1)}"><a href ng-click = "panel.setTab(1)">Concert Band</a></li>
                <li ng-class="{active:panel.isSet(2)}"><a href ng-click = "panel.setTab(2)">Ceremonial Band</a></li>
                <li ng-class="{active:panel.isSet(3)}"><a href ng-click = "panel.setTab(3)">191st Jazz Combo</a></li>
                <li ng-class="{active:panel.isSet(4)}"><a href ng-click = "panel.setTab(4)">Brass Ensemble</a></li>
                <li ng-class="{active:panel.isSet(5)}"><a href ng-click = "panel.setTab(5)">Celtic Fire</a></li>
            </ul>
            <p> the tab number is: {{panel.tab}}</p>
</section>
</body>

Your reference to panel with this was not correct,
You were using {{tab}} instead of {{panel.tab}} to display the selected tab,
And your return statement should have been return panel.tab == checkTab;.

Hope the issue is resolved!

Pankaj Parkar · Accepted Answer · 2015-06-25 22:07:42Z

1

Your this inside a setTab & isSet function are different, you should have declare a variable and assign this.

Controller

var app = angular.module("coolApp", []);
app.controller("panelSelector", function(){
  var panel = this;
  panel.tab = 1; 

  panel.setTab = function(tabChoice){
      panel.tab = tabChoice;
  };
  panel.isSet = function(checkTab){
      return panel.tab == checkTab;
  };
});

edited Jun 25, 2015 at 22:07

answered Jun 25, 2015 at 21:06

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

2 Comments

Ming Huang Over a year ago

So at the end of the this function, we have a return, and you changed it to panel.tab == checkTab;. Does this mean that it will return true when any tab is clicked since the ng-click and ng-class's parameter entered for each tab is equal?

Pankaj Parkar Over a year ago

@MingHuang yes it will return a bool based on there both condition.

Collectives™ on Stack Overflow

Angular tab selecting using controller method

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related