Question

我的角度应用程序中有一个带有几个标签的弹出窗口标签有类似引导程序的样式，我应该通过角度来切换它们我的标签有以下标记（代码简化）：

<div class="settingsPopupWindow">
    <div>                   
        <!-- Nav tabs -->
        <ul class="nav nav-tabs">
            <li class="{{getStyle(0)}}" ng-click="showTab(0)">
                <a href="">
                    First tab nav
                </a>
            </li>
            <li class="{{getStyle(1)}}" ng-click="showTab(1)">
                <a href="">
                    Second tab nav
                </a>
            </li>                                       
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div class="tab-pane {{getStyle(0)}}">                          
                First tab content
            </div>

            <div class="tab-pane {{getStyle(1)}}">
                Second tab content
            </div>                                      
        </div>
    </div>

我的控制器中有以下代码用于切换标签：

.......
$scope.active = 0;     

$scope.showTab = function (tabNumber) {
    $scope.active = tabNumber;
};

$scope.getStyle = function(n) {
    if (n === $scope.active) {
        return 'active';
    }
    else {
        return '';
    }
}
.......

如果导航元素和制表符块已打开，则它们都应具有active类。

在初始状态下一切都是正确的：
第一个标签已开启，因此First tab nav有active类
（并突出显示）并显示First tab content。

但如果我点击Second tab nav切换标签 -
只有导航元素（Second tab nav）具有active类
（Second tab content没有。

第二个标签导航元素突出显示为活动
但我仍然在面板中看到First tab content，
所以我需要在Second tab nav上单击两次才能真正切换到第二个标签。

如果处于初始状态，我点击Second tab nav，然后点击First tab nav，
First tab nav已激活且已突出显示，但我在窗格中看到Second tab content 因此，从导航元件的切换开始，标签面板的切换就会落后一步！这是非常令人惊讶的，因为导航元素和制表符的类都具有相同的功能。

请帮助我正确切换这些标签。谢谢。

更新

我尝试使用ng-class代替class，但它没有帮助。在导航元素和标签面板的切换中，我仍然只有一键式的差距。我检查了showTab()功能，它工作正常，活动标签/导航开关的数量正确。在更改活动标签号后，标签的样式似乎不会立即更新，而是“导航”的样式。仍在续订，无论使用class还是ng-class，都会发生这种情况。

Answer 1

使用ngClass指令。

对于标签导航：

<li ng-class="{'active': active == 0}" ng-click="ShowTab(0)"><a href="">First tab nav</a></li>
<li ng-class="{'active': active == 1}"  ng-click="ShowTab(1)"><a href="">Second tab nav</a></li>

对于您的标签内容：

<div class="tab-pane" ng-class="{'active': active == 0}">                          
    First tab content
</div>
<div class="tab-pane" ng-class="{'active': active == 1}">
    Second tab content
</div>

编辑：工作示例

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  $scope.active = 0;

  $scope.showTab = function(tabNumber) {
    $scope.active = tabNumber;
  };
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs">
    <li ng-class="{'active': active == 0}" ng-click="showTab(0)">
      <a href="#">First tab nav</a>
    </li>
    <li ng-class="{'active': active == 1}" ng-click="showTab(1)">
      <a href="#">Second tab nav</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane" ng-class="{'active': active == 0}">
      First tab content
    </div>

    <div class="tab-pane" ng-class="{'active': active == 1}">
      Second tab content
    </div>
  </div>
</div>

Answer 2

您应该使用ngClass属性。

来自ngClass文档的

-

ngClass指令允许您通过数据绑定表示要添加的所有类的表达式来动态设置HTML元素上的CSS类。

在我看来，最好不要使用函数来获取类名，
而是将ng-class与标记的范围属性一起使用：

<div class="tab-pane" ng-class="{'desiredClassName': tagObject.isTagActive}">                          
    First tab content
</div>
<div class="tab-pane" ng-class="{'desiredClassName': tagObject.isTagActive}">
    Second tab content
</div>

这种方式tagObject可以是包含标记信息的对象如果它是集合中的项目，您可以使用ng-repeat attr。

isTagActive将从任何方法（范围，服务等）更新和angular会立即用你想要的类更新标签<div>。

以角度

2 个答案: