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添加到section选项卡下，因为它们在控制器的范围之外，如下面的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

您的代码中存在两个问题。

您的面板div在控制器div之外

你应该使用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>

角度控制器无法正常工作

2 个答案: