Wie setze ich ngclass/ngstyle inline für pseduo css calsses

Question

Ich habe die unten html und css, und ich muss .tooltip: nach {{item.color}} auf die gleiche Weise, die ich für die statische Klasse mit eingestellt habe 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; 
    } 

Answer 1

Haben Sie dieses Beispiel ???

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>