Question

我想＆＃34;翻译＆＃34; JSON到图标列表：

"score": [
{
  "idgroup": 0,
  "value": 1
},
{
  "idgroup": 1,
  "value": 0
},
{
  "idgroup": 2,
  "value": 0
}
]

为：

<ul>
<li class="icon-active-profil"/><li class="icon-profil"/><li class="icon-profil"/>
</ul>
<ul>
<li class="icon-profil"/><li class="icon-profil"/><li class="icon-profil"/>
</ul>
<ul>
<li class="icon-profil"/><li class="icon-profil"/><li class="icon-profil"/>
</ul>

每行有3个图标，默认类为 icon-profil 。在示例中，第一个项目只有一个活动图标（ icon-active-profil ）。取决于得分。值

**更新：**

        <ul>
            <li ng-repeat="n in [0,1,2]" ng-class="{'icon-fessier-active':scores[1].value>0}" class="icon-fessier icon-profil"/>
        </ul>
        <ul>
            <li ng-repeat="n in [0,1,2]" ng-class="{'icon-stretch-active':scores[2].value>0}" class="icon-stretch icon-profil"/>
        </ul>

结果：我有三次同一课，我看不出什么是好方法

Answer 1

<li ng-repeat="n in [0,1,2]" ng-class="{'icon-fessier-active':scores[1].value>0}" class="icon-fessier icon-profil"/>

您在ng-class中的任何地方都没有使用n。所以所有类都是相同的。

如果我理解正确，如果分数值等于'icon-fessier-active'，您想要的是n，那么

<li ng-repeat="n in [0,1,2]" ng-class="{'icon-fessier-active':scores[1].value === n}" class="icon-fessier icon-profil"/>

Answer 2

<ul ng-repeat="score in scores">
  <li ng-class="score.value ? 'icon-active-profil' : 'icon-active'">
  <li class="icon-profil"/>
  <li class="icon-profil"/>
</ul>

使用条件ng-class进行自定义ng-repeat

2 个答案: