角度控制器无法正常工作

Question

I have 3 tabs which should show the corresponding information when clicked:

<section ng-controller="PanelController as panel">
  <ul class="nav nav-pills">
    <li ng-class="{ active:panel.isSelected(1) }">
      <a href ng-click="panel.selectTab(1)">Description</a>
    </li>
    <li ng-class="{ active:panel.isSelected(2) }">
      <a href ng-click="panel.selectTab(2)">Specifications</a>
    </li>
    <li ng-class="{ active:panel.isSelected(3) }">
      <a href ng-click="panel.selectTab(3)">Reviews</a>
    </li>
  </ul>
{{tab}}
</section>

<div class="panel" ng-show="panel.isSelected(1)">
  <h4>Description</h4>
  <p>{{product.description}}</p>
</div>
<div class="panel" ng-show="panel.isSelected(2)">
  <h4>Specifications</h4>
  <blockquote>{{product.specification}}</blockquote>
</div>
<div class="panel" ng-show="panel.isSelected(3)">
  <h4>Reviews</h4>
  <blockquote>{{product.review}}</blockquote>
</div>

Here is the controller code:

app.controller('PanelController', function(){
    this.tab = 1;

    this.selectTab = function(setTab) {
        this.tab = setTab;
    };
    this.isSelected = function(checkTab){
        return this.tab === checkTab;
    };
});

When I click on the tabs, the information does not show (for example; the {{product.description}} does not show my description). I have tested the code in developer tools, and it tells me that 'this.tab' in the controller does in-fact change to the corresponding tab number when the different tabs are selected, but I cannot figure out why my information is not showing.

Before I added the tabs to my application, the {{product.description}} etc. were working perfectly, however it now does not show when tabs are selected.

Answer 1

Few things that are causing that issue

You are using as syntax which means that in controller you have to do this:

app.controller('PanelController', function(){
    var panel=this;
    panel.tab = 1;

    panel.selectTab = function(setTab) {
        panel.tab = setTab;
    };
    panel.isSelected = function(checkTab){
        return panel.tab === checkTab;
    };
});

And in your html bring ur class panel divs under section tab as they are outside the scope of the controller as per your html like below

   <section ng-controller="PanelController as panel">
      <ul class="nav nav-pills">
        <li ng-class="{ active:panel.isSelected(1) }">
          <a href ng-click="panel.selectTab(1)">Description</a>
        </li>
        <li ng-class="{ active:panel.isSelected(2) }">
          <a href ng-click="panel.selectTab(2)">Specifications</a>
        </li>
        <li ng-class="{ active:panel.isSelected(3) }">
          <a href ng-click="panel.selectTab(3)">Reviews</a>
        </li>
      </ul>
    {{tab}}

<div class="panel" ng-show="panel.isSelected(1)">
      <h4>Description</h4>
      <p>{{product.description}}</p>
    </div>
    <div class="panel" ng-show="panel.isSelected(2)">
      <h4>Specifications</h4>
      <blockquote>{{product.specification}}</blockquote>
    </div>
    <div class="panel" ng-show="panel.isSelected(3)">
      <h4>Reviews</h4>
      <blockquote>{{product.review}}</blockquote>
    </div>
    </section>

Answer 2

You have two problems in your code.

1. your panel divs are outside controller div
2. you should use this.panel = 1; not this.tab

 var app= angular.module('newApp',[]); app.controller('PanelController', function(){ this.panel = 1; this.selectTab = function(setTab) { this.panel = setTab; }; this.isSelected = function(checkTab){ return this.panel === checkTab; }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="newApp"> <section ng-controller="PanelController as panel"> <ul class="nav nav-pills"> <li ng-class="{ active:panel.isSelected(1) }"> <a href ng-click="panel.selectTab(1)">Description</a> </li> <li ng-class="{ active:panel.isSelected(2) }"> <a href ng-click="panel.selectTab(2)">Specifications</a> </li> <li ng-class="{ active:panel.isSelected(3) }"> <a href ng-click="panel.selectTab(3)">Reviews</a> </li> </ul> {{tab}} <div class="panel" ng-show="panel.isSelected(1)"> <h4>Description</h4> <p>{{product.description}}</p> </div> <div class="panel" ng-show="panel.isSelected(2)"> <h4>Specifications</h4> <blockquote>{{product.specification}}</blockquote> </div> <div class="panel" ng-show="panel.isSelected(3)"> <h4>Reviews</h4> <blockquote>{{product.review}}</blockquote> </div> </section> </div>