1

我有下面的 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;
    }
4

1 回答 1

0

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

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>

于 2016-03-29T17:09:51.010 回答