Question

我刚刚开始尝试Angular。我试图使用引导标签功能。我想添加课程＆＃39; active＆＃39;动态到活动li，具体取决于用户点击的标签。以下是我的HTML代码段。

<div ng-controller="TabController as tabs">

{{currentTab}}
<ul class="nav nav-pills" >
  <li ng-class="{'active':tabs.isTab('Events')}" ><a href="#" ng-click="setTab('Events')">Events</a></li>
  <li ng-class="{'active':tabs.isTab('Surveys')}" ><a href="#" ng-click="setTab('Surveys')">Surveys</a></li>
  <li ng-class="{'active':tabs.isTab('Forums')}" ><a href="#" ng-click="setTab('Forums')">Forums</a></li>
</ul>

我正在做的是，当用户点击任何链接时，我会使用标签名称来设置setTab（）方法，如果＆＃39; currentTab＆＃39;则更改值。如您所见，我和＃39;打印＆＃39; currentTab＆＃39;的值在页面顶部，它打印为＆＃39;事件＆＃39;第一次。当用户点击不同的标签时，我可以更改currentTab的值（页面上打印的值正在变化）。但唯一的问题是，“活跃”＃39;类未添加到选定的选项卡。对于每个li，我通过调用isTab（）方法检查currentTab值是否与特定选项卡匹配。我在isTab（）方法中放了一些日志，但没有打印日志。

以下是我的模块和控制器定义。

var app = angular.module（＆＃39; myApp＆＃39;，[]）;

app.controller（＆＃39; TabController＆＃39;，＆＃39; $ scope＆＃39;，＆＃39; $ http＆＃39;，功能（$ scope，$ http）{

$scope.currentTab = 'Events';

$scope.setTab = function(tabName)  {
    console.log('in setTab '+tabName);      // this is getting called
    $scope.currentTab = tabName;
};

$scope.isTab = function(tabName)  {
    console.log('in isTab '+tabName);                  // this is never printed!
    return $scope.currentTab === tabName;
    //return true;
};

}]）;

Answer 1

这是因为controller as语法。如果您使用此项，则应在this中定义所有视图模型数据，包括函数：

this.isTab = function(tabName)  {
    console.log('in isTab '+tabName);
    return this.currentTab === tabName;
};

它会起作用。

ng-class表达式无法解析

1 个答案: