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-25T23:47:31.277

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 · Answer 2 · 2015-06-25T22:07:42.937

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 '15 at 22:07

answered Jun 25 '15 at 21:06

Pankaj Parkar

134,766
23
234
299

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? – Ming Huang Jun 26 '15 at 16:58
1

@MingHuang yes it will return a bool based on there both condition. – Pankaj Parkar Jun 26 '15 at 16:59

Angular tab selecting using controller method

2 Answers2