CSS把某種顏色取決於angularjs條件

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"

我想改變我的<i class="glyphicon glyphicon-envelope">取決於內部條件的顏色我JavaScript控制器。

我無法將特定圖標綁定到索引，以便angularjs知道哪些圖標要更改顏色。

Answer 1

而不是固定的類，您可以使用ng-style分配一個類，當條件爲真。

如果你的條件是你set的布爾flag屬性，要添加一個名爲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'; 
};