角器工作不正常

Question

我有3个选项卡应显示相应的信息被点击时：

<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> 

这里是控制器代码：

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

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

当我点击选项卡，信息不显示（例如; {{product.description}}不显示我的描述）。我已经在开发人员工具中测试了代码，它告诉我，当选择不同的选项卡时，控制器中的“this.tab”实际上会更改为相应的选项卡编号，但我无法弄清楚为什么我的信息未显示。

在将标签添加到我的应用程序之前，{{product.description}}等工作正常，但现在不显示选择标签时的情况。

这是造成这个问题

你正在使用的语法

Answer 1

事情很少，这意味着在控制器，你必须这样做：

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

而在你的HTML带来第标签乌尔班面板的div因为它们不在控制器范围内，因为它们像下面的html一样

<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

在代码中有两个问题。

1. 您面板的div在室外控制器DIV
2. 你应该使用this.panel = 1;不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>