Question

我正在使用JSON绑定到以下内容 -

一个事实包含一个名字 - fact.name ='ABC'，fact.name ='XYZ'

离子列表

 ion-item ng-repeat="fact in facts" item="fact" 


 if fact contains  ABC I want to show the item like this.

   use ABC class and show it in BOLD

if fact contains   XYZ  I want to show the itme like this.

use XYZ class and show in RED


    and so on

如何根据值有条件地显示/格式化列表项？

Answer 1

您可以使用ng-class应用您的CSS：

<li ng-class="{'ABC': fact.name == 'ABC', 'XYZ': fact.name == 'XYZ'}></li>

如果你想申请css，如果fact.name包含一个字符串：

 <li ng-class="{'ABC': fact.name.indexOf('ABC') > -1, 'XYZ': fact.name.indexOf('XYZ') > -1}></li>

如果你确定你的css类名和fact.name总是匹配，你实际上可以直接将它绑定到class属性。

 <li class="{{fact.name}}" style="{{ fact.name == 'ABC' ? 'font-weight:bold':'color:red'}}"></li>

注意：定义css类时，单独使用样式不是一个好习惯。我希望这些样式适当地转移到css类。

AngularJS - 列表 - 根据值有条件地格式化列表中的项目

1 个答案: