AngularJS和UI-Bootstrap标签，使用ng-class修改标签

Question

我正在与 AngularJS 和 UI-Bootstrap 一起处理一个带有 ui-tabs 的项目。

大致布局是这样的：

<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:'count' 是一个过滤器，用于计算重复选项卡对象中 'count' 字段的总和。这会跟踪已回答的问题，tab.Questions.length 会计算选项卡中重复的问题数。

我可以在选项卡名称中同时显示这两个选项卡名称，就像我在这里所做的那样，这很有效，因此在每个选项卡中，选项卡名称是名称：已回答的问题总数，即：'Parking: 1 of 5' .

我想做的是使用 ng-class 在这些数字相等时向选项卡添加 'completed' class，以及该选项卡中的所有问题已回复

我可以在选项卡中添加一个 class='complete'，这很有效，但是尝试使用 ng-class 根本不起作用，不是甚至 ng-class="complete".

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

Answer 1

恐怕你不能直接在ui-tab上使用ng-class。这里的问题是 ui-tab 的内容（和属性）被包含在 this 中。它有自己的 ng-class 正在破坏你的。这是我设法 find/use.

的唯一解决方法

像这样将 class 与 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">

    <!-- Repeated Content -->

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

但是请注意，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">

    <!-- Repeated Content -->

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

如果您需要放置多个 classes，那么我将创建一个函数，将 returns classes 放入一个字符串中：

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

希望对你有所帮助。

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 提供了类属性，您可以为此使用。

As indicated in the documentation. 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修改标签

AngularJS and UI-Bootstrap Tabs, using ng-class to modify tab

angularjs

angular-ui-bootstrap