如何在angularjs中使用css md-tab标签答案

【问题标题】：how to css md-tab label in angularjs如何在angularjs中使用css md-tab标签
【发布时间】：2019-03-04 05:18:51
【问题描述】：

标记：

md-tab label="Current ({{ctrl.ongoing_assignments.length}})"

所需输出：

当前 (1)

【问题讨论】：

当询问由您的代码引起的问题时，如果您提供人们可以用来重现问题的代码，您将获得更好的答案。该代码应该是……stackoverflow.com/help/mcve
但我确实提供了？

标签： html css angularjs angular-material

【解决方案1】：

根据您的问题，我不知道这个解决方案是否成功，
但看看它是否有帮助，然后我可以进行修改以达到预期的结果。
目前，
显示 2 个标签：
- 第一个是普通标签，
- 第二个在激活时改变背景颜色。

angular.module('MyApp', ['ngMaterial'])
            .controller('AppCtrl', function ($scope, $mdSidenav) {
                $scope.ButtonText = "Test Button";

                $scope.buttonClick = function() {
                    alert("First Angular Material App");
                };
            });

.other-div md-tabs .md-tab.md-active .md-ripple-container {
  color: rgb(248,187,208);
  background: red;
  z-index: -1;
}
.other-div md-tabs .md-tab.md-active {
    color: green;
}

<html ng-app="MyApp">
<head>
    <title>First App Angular Material</title>
    <link rel="stylesheet" href="https://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
    <script src="https://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.js"></script>
</head>
<body>
    <div ng-controller="AppCtrl">
      <md-tabs md-selected="1" md-stretch-tabs="auto" md-align="bottom" md-dynamic-height md-border-bottom md-center-tab md-swipe-content>
        <md-tab label="tab1">
          <md-tab-body>
            <h1>Welcome to first tab</h1>
            <md-tab-body>
          </md-tab>
            <md-tab label="tab2">
          <md-tab-body>
            <h1>Welcome to Second tab</h1>
            <md-tab-body>
          </md-tab>
            <md-tab label="tab3">
          <md-tab-body>
            <h1>Welcome to Third tab</h1>
            <md-tab-body>
          </md-tab>
      </md-tabs>
    </div>
    
    <div ng-controller="AppCtrl" class='other-div'>
      <md-tabs md-selected="1" md-stretch-tabs="auto" md-align="bottom" md-dynamic-height md-border-bottom md-center-tab md-swipe-content>
        <md-tab label="tab1">
          <md-tab-body>
            <h1>Welcome to first tab</h1>
            <md-tab-body>
          </md-tab>
            <md-tab label="tab2">
          <md-tab-body>
            <h1>Welcome to Second tab</h1>
            <md-tab-body>
          </md-tab>
            <md-tab label="tab3">
          <md-tab-body>
            <h1>Welcome to Third tab</h1>
            <md-tab-body>
          </md-tab>
      </md-tabs>
    </div>
</body>
</html>

【讨论】：

感谢这个例子兄弟在我的帖子中你可以看到标签标签有一个像这样的角度调用者“{{}}”这意味着我在我的控制器中调用了一些东西并且那个数字是一个我需要有颜色的
在您的示例中，标签名称是带有颜色的“TAB 2”，但我想要的是 TAB
@wiwit 不可能，因为md-tab 呈现的用于显示标签的html 是tab2。您可以看到我们提供的标签保存在span 标签内，值@987654327 @ 是一个单一的实体。所以它只能用一种颜色着色，如果你想要 2 种颜色，那么其他值必须在不同的 span 标签内，比如tab2，但是我们没有控制md-tab 呈现的 html，所以我们不能用 2 种不同颜色为单个实体着色。
查看参考：stackoverflow.com/questions/6913234/…
那是伤心的兄弟 T_T 给我绳子我会上吊自己

【解决方案2】：

如果您希望此样式仅应用于此元素，您可以这样做：

在 css 文件中：

.reference{ 
    background-color: red;
}

你的html：

md-tab class="reference" label="Current ({{ctrl.ongoing_assignments.length}})"

如果您希望此样式应用于所有 md-tab 标签，您可以这样做：

md-tab {
   background-color: red;
}

【讨论】：

您确定css文件包含在您的项目中吗？