Question

我正在使用ui-tabs在项目上使用AngularJS和UI-Bootstrap。

粗略的布局是：

<uib-tabset>
    <uib-tab ng-repeat="tab in tabs" heading="{{tab.TAB_NAME}} : {{tab.Questions|sumByKey:'count'}} of {{tab.Questions.length}}" active="tab.active" disable="tab.disabled">

    <!-- Repeated Content -->

    </uib-tab>
</uib-tabset>

sumByKey：＆＃39;计数＆＃39;是一个过滤器，用于计算＆＃39;计数的总和。重复标签对象中的字段。这将跟踪已回答的问题，tab.Questions.length计算选项卡中重复的问题数。

我可以在选项卡名称中显示这两个，因为我在这里工作，这是有效的，因此在每个选项卡中，选项卡名称是名称：问题 - 回答总问题，即：＆＃39;停车：1/5＆＃39;。

我尝试做的是使用ng-class添加一个完整的＆＃39;当这些数字相等时，选项卡会显示在选项卡上，并且该选项卡中的所有问题都已得到解答。

我可以添加一个类=＆＃39;完成＆＃39;到标签，这是有效的，但尝试使用ng-class根本不起作用，甚至ng-class =＆＃34;完成＆＃34;。

有办法做到这一点吗？ ng-class可以和uib-tabs一起使用吗？是否有其他机制来评估表达式并修改选项卡上的类？

Answer 1

我担心你无法直接在ng-class上使用ui-tab。这里的问题是ui-tab的内容（和属性）被转换为this。哪个有自己的ng-class可以破坏你的<uib-tabset> <uib-tab class="{{complete}}" ng-repeat="tab in tabs" heading="{{tab.TAB_NAME}} : {{tab.Questions|sumByKey:'count'}} of {{tab.Questions.length}}" active="tab.active" disable="tab.disabled">  </uib-tab> </uib-tabset>。这是我设法找到/使用的唯一解决方法。

像这样使用类和ng-class：

complete

但请注意，<uib-tabset> <uib-tab class="{{complete ? 'complete':''}}" ng-repeat="tab in tabs" heading="{{tab.TAB_NAME}} : {{tab.Questions|sumByKey:'count'}} of {{tab.Questions.length}}" active="tab.active" disable="tab.disabled">  </uib-tab> </uib-tabset>必须是一个字符串才能正常工作。如果它是一个布尔值，那么你可能会有更好的运气：

<uib-tabset>
    <uib-tab class="{{isCompleted}}" ng-repeat="tab in tabs" heading="{{tab.TAB_NAME}} : {{tab.Questions|sumByKey:'count'}} of {{tab.Questions.length}}" active="tab.active" disable="tab.disabled">

    <!-- Repeated Content -->

    </uib-tab>
</uib-tabset>

如果您需要放置多个类，那么我将创建一个函数，该函数返回字符串中的类：

$scope.isCompleted = function () {
    // some logic
    return 'complete done';
}

在控制器中：

{{1}}

希望对你有所帮助。

Answer 2

非常感谢jsonmurphy！这让我头疼了一段时间，这就像一个魅力！

最终语法是：

class="{{ (tab.Questions|sumByKey:'count') == (tab.Questions.length) ? 'completed' : ''}}"

然后将这些添加到CSS：

li.completed a.ng-binding{
    background-color: silver;
}

li.active.completed a.ng-binding{
    background-color: silver;
}

当已回答该选项卡中的所有问题时，这会将整个选项卡的选项卡背景设置为白银。 li.completed和li.active.completed覆盖当前选项卡（.active）时，以及选项卡完成但不是当前选项卡时。它们本来可以写成一条规则，但为了清楚起见，我将它们分开。

Answer 3

如上所述，我们不能为此使用 ng-class ，但是 uib-tab 提供了一个 classes 属性，您可以将其用于这个。

如文档中所示。 https://angular-ui.github.io/bootstrap/#!#tabs

下面是一个工作示例，显示可以动态更改类。

var app = angular.module('example', ['ui.bootstrap']);

app.controller('controller', ['$scope', function($scope) {
    var classOne = 'bg-success';
    var classTwo = 'bg-danger';

    $scope.swapClasses = function() {
      var tempHolder = classOne;
      classOne = classTwo;
      classTwo = tempHolder;
    }

    $scope.getClassOne = function() {
      return classOne;
    }

    $scope.getClassTwo = function() {
      return classTwo;
    }
  }

]);

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.1.3/ui-bootstrap-tpls.js"></script>


<body ng-app="example">
  <div ng-controller="controller">
    <div>
      <input type="checkbox" ng-click="swapClasses()" /> Swap Classes!
    </div>
    <br>
    <uib-tabset>
      <uib-tab heading='Tab One' classes="{{getClassOne()}}">

        <div class="tab-container">
          I am Tab One
        </div>
      </uib-tab>


      <uib-tab heading='Tab Two' classes="{{getClassTwo()}}">

        <div class="tab-container">
          I am Tab Two
        </div>
      </uib-tab>
    </uib-tabset>

  </div>
</body>

AngularJS和UI-Bootstrap选项卡，使用ng-class修改选项卡

3 个答案: