Question

我有以下html：

 <div>
      <i class="glyphicon glyphicon-envelope" 
         style="margin-top: -50px; cursor:pointer; color: #1F45FC" 
         ng-click="createComment(set_id)">
      </i> Route 
      <center>
           <span class="route_no">{{set_id}}</span> 
      </center>
 </div>

 <div>
      <center>Status: {{set.total_one}}/{{set.total_two}}</center>
 </div>

这是在ng-repeat="set in settings"

内

我想根据javascript控制器中的条件更改<i class="glyphicon glyphicon-envelope">的颜色。

我无法将特定图标绑定到索引，以便angularjs知道要更改颜色的图标。

Answer 1

您可以使用ng-style在条件为真时指定一个类，而不是修复类。

如果您的条件是flag的布尔set属性，并且您希望在其为true时添加名为red的类，则可以这样做：

<i class="glyphicon glyphicon-envelope"
   ng-click="createComment(set_id)"
   ng-style="{ red: set.flag }">

或者你可以使用一个表达式来计算类名，三元运算符在这里派上用场。例如，如果您想要前3个red，其余为blue：

<i class="glyphicon glyphicon-envelope"
   ng-click="createComment(set_id)"
   ng-style="$index < 3 ? 'red' : 'blue'">

Answer 2

您可以在控制器中定义一个函数，该函数将根据条件返回所需的颜色。看一下这个JSFiddle

这是函数，您可以在其中应用必要的逻辑：

this.getColor = function (cust) 
{ 
    if (cust.total_one > 400) return 'red';
    if (cust.total_one > 300) return '#FF4700';
    if (cust.total_one > 200) return '#FF9900';
    if (cust.total_one > 100) return 'yellow';
};

CSS根据angularjs条件转动某种颜色

2 个答案: