Question

我有一个显示数据的视图，我想在视图中的列表项上添加另一个类。

<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

我怎样才能用角度实现这个目标？我可以将这个逻辑直接放入我的视图中，还是需要在我的控制器中定义它？

提前致谢

Answer 1

由于您需要进行一些重要的比较，我建议将其移到函数中，而不是将其放在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 */
}

Answer 2

我认为你可以像这样使用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)};
}

具有不同条件的angularjs ng-class

2 个答案: