4

データを表示するビューがあり、ビューのリスト項目に別のクラスを追加したいと考えています。

<input type="text" class="filter" placeholder="search..." ng-model="search">
<ul>
    <li ng-repeat="item in items | filter:search | orderBy:'date'">
        {{ date }} {{ item.heading }}<button ng-click="deleteItem(item.ID)"><i class='icon-trash'></i></button>
    </li>
</ul>

item.dateという変数があり、それを今日の別の変数と比較したいと考えています。ロジックは次のとおりです。

if (item.date - today <= 0) 
    apply class1 
if else (item.date - today > 0 && item.date - today <= 3)
    apply class2
and so on

どうすれば角度でこれを達成できますか? このロジックをビューに直接配置できますか、それともコントローラーで定義する必要がありますか?

前もって感謝します

4

2 に答える 2

12

比較するのは少し難しいので、HTML ではなく関数内に移動することをお勧めします。

<li ng-class="getClass(item.date)" 
    ng-repeat="item in items | filter:search | orderBy:'date'">

JS:

$scope.getClass = function(date){
    /* comparison logic here*/
    /* returs class name as string */
}
于 2013-08-13T11:46:00.003 に答える
5

次のように使用できると思いますng-class。

HTML

<li ng-class="{'class1': item.date - today <= 0, 'class2': (item.date - today > 0 && item.date - today <= 3)}"></li>

または、次のように関数内に移動します。

HTML

<li ng-class="getClass(item.date)"></li>

JS

$scope.getClass = function(date){
    return {'class1': item.date - today <= 0, 'class2': (item.date - today > 0 && item.date - today <= 3)};
}
于 2013-08-13T12:58:18.263 に答える