は、私はオブジェクトの配列を持っているAngularJs

Question

にカスタムフィルタを使用してアイテムに色を適用します。

 [ 
      { 
      idPriority: 1, 
      priority: "Critical", 
      isChecked: 0 
      }, 
      { 
      idPriority: 2, 
      priority: "High", 
      isChecked: 0 
      }, 
      { 
      idPriority: 3, 
      priority: "Medium", 
      isChecked: 0 
      }, 
      { 
      idPriority: 4, 
      priority: "Low", 
      isChecked: 0 
      } 
     ] 

私はNGリピートを使用して、テーブル内のこのデータを表示すると、このような優先順位であればそのカスタムフィルタを適用したいですがHighまたはCriticalの場合は赤色で表示し、優先度がMediumまたはLowの場合は黄色で表示する必要があります。それも可能ですか？

Answer 1

あなたが優先

<tr ng-repeat=" item in items"> 
    <td> 
     <span class="style for red" ng-show="item.priority=='Critical'">Critical</span> 
     <span class="style for yellow" ng-show="item.priority=='High'">High</span> 
     <span class="style for green" ng-show="item.priority=='Medium'">Medium</span> 
    </td> 
</tr> 

またはカスタムフィルタをしたい場合、あなたはフィルタを作成することができますの値に応じて異なるスタイルで別の列を作成し、その可視性を変更することができますそれ

$scope.filterPriority = function (item) { 
    if (item.priorty == 'High') { 
     item.class = 'class for high'; 
    } 
    else if (item.priorty == 'Low') { 
     item.class = 'class for low'; 
    } 
    else { 
     item.class = 'default class'; 
    } 

    return true; 
}; 

にし、あなたのhtmlにそのクラスを設定し

<table> 
<tr ng-repeat=" item in items | filter:filterPriority"> 
<td> 
    <span class="{{item.class}}"></span> 
</td>       
</tr> 

Answer 2

これはCSSを使用して実現できます。例えば、 <tr class="{{ item.priority }}"> some content</tr>

は、適切なクラスを追加します。そして、どこか自分のスタイルシートで

.Critical { color: red; } 
.High { color: blue; } 
.Medium { color: green; }