AngularJS

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 class 名称和 fact.name 始终匹配，实际上您可以直接将其绑定到 class 属性。

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

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

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

AngularJS - List - conditionally format an item in a list based on value