Question

标记：

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

必需的输出：

当前（1）<=====我希望数字为红色背景，并且具有圆形形状，如Facebook中的通知

Answer 1

如果您希望将此样式仅应用于此元素，则可以执行以下操作：

在CSS文件中：

.reference{ 
    background-color: red;
}

您的html：

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

如果您希望将此样式应用于所有md-tab标签，则可以执行以下操作：

md-tab {
   background-color: red;
}

Answer 2

根据您的问题，我不知道此解决方案是否成功，
但是请查看其是否有用，然后我可以进行修改以达到所需的结果。
当前显示
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>

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

2 个答案: