Angular 使用控制器方法选择选项卡

Question

我正在尝试使用 AngularJS 在使用控制器方法选择特定选项卡时显示选项卡编号。它没有像预期的那样。非常感谢您对此的帮助。

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>

代码

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

Answer 1

你的 this 在 setTab 和 isSet 函数中是不同的，你应该声明一个变量并赋值 this.

控制器

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

Answer 2

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>

您对 panel 和 this 的引用不正确，
您使用 {{tab}} 而不是 {{panel.tab}} 来显示选定的选项卡，
而您的 return 语句应该是 return panel.tab == checkTab;。

希望问题得到解决！

Angular 使用控制器方法选择选项卡

Angular tab selecting using controller method

javascript

angularjs

angularjs-scope

angularjs-ng-class

angularjs-controlleras