如何为伪 css 类设置 ngclass/ngstyle 内联

Posted 2023-03-06

【中文标题】如何为伪 css 类设置 ngclass/ngstyle 内联

【英文标题】：how to set ngclass/ngstyle inline for pseduo css calsses

【发布时间】：2016-07-17 08:03:32

【问题描述】：

我有以下 html 和 css，我需要将 .tooltip:after 设置为 item.color ，就像我使用 ngstyle 为静态类设置的一样。

<div class="tooltip" ng-style=" 'background' : item.color" ng-class=" 'after':  border-top: solid item.color 10px;"</div></a>

 .time-of-year .tooltip:before 
        bottom: -22px;
        content: " ";
        display: block;
        height: 20px;
        left: 85px;
        position: absolute;
        border-color: #a9a9a9 transparent transparent transparent;
        border-style: solid;
        border-width: 11px;
    


    /* Yellow triangle */
    .time-of-year .tooltip:after 
        border-left: solid transparent 10px;
        border-right: solid transparent 10px;
        border-top: solid #fff 10px;
        bottom: -10px;
        content: " ";
        height: 0;
        left: 99px;
        margin-left: -13px;
        position: absolute;
        width: 0;
    

【问题讨论】：

添加 plunkr/fiddle 这样可以发挥优势，从人们那里获得更多帮助..

【参考方案1】：

你有喜欢这个样本吗？？？

var app = angular.module("app",[]);

app.controller("ctrl" , function($scope)
  $scope.rowIndex = -1;
  $scope.items = ["name":"ali","color":'yellow',"name":"reza","color":'red',"name":"amir","color":'pink',"name":"jim","color":'green',"name":"babak","color":'blue',"name":"vfrt","color":'red'];
 
  );

.field-tip 
    position:relative;

    .field-tip .tip-content 
        position:absolute;
        top:-10px; /* - top padding */
        right:9999px;
        width:200px;
        margin-right:-220px; /* width + left/right padding */
        padding:10px;
    
        -webkit-box-shadow:2px 2px 5px #aaa;
           -moz-box-shadow:2px 2px 5px #aaa;
                box-shadow:2px 2px 5px #aaa;
        opacity:0;
        -webkit-transition:opacity 250ms ease-out;
           -moz-transition:opacity 250ms ease-out;
            -ms-transition:opacity 250ms ease-out;
             -o-transition:opacity 250ms ease-out;
                transition:opacity 250ms ease-out;
    
        .field-tip .tip-content:before 
            content:' '; /* Must have content to display */
            position:absolute;
            top:50%;
            left:-16px; /* 2 x border width */
            width:0;
            height:0;
            margin-top:-8px; /* - border width */
            border:8px solid transparent;
            border-right-color:#333;
        
        .field-tip:hover .tip-content 
            right:-20px;
            opacity:1;
        

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">
  
  <table>
     <tr ng-repeat="item in items" class="field-tip" ng-style=" 'background' : item.color"  >
             <td class="field-tip">item.name  <span class="tip-content" ng-style="'border-top':'solid 10px item.color'">item.name</span></td>
   
      </tr>
</table>
            
</div>