css - 在ng-repeat中动态创建类，并关联属性

Question

我想对足球队的一组球员运行 ng-repeat。每个玩家都有一个 position 属性，其计算结果为 gk、df、mf 或 fw。我想要它，所以每个位置都与一种颜色相关联。

• GK:绿色，
• DF:蓝色，
• MF:橙色，
• FW:红色。

        <md-list-item class="md-2-line">

            <div>

              <div class="pos">
                  <p class="{{player.position}}">{{player.position | uppercase }}</p>
              </div>

            </div>

        </md-list-item>

目前，我在每个播放器的 position 属性上使用文字 Angular 表达式，它动态生成我已硬编码为的类(以及段落标记中的以下字符串输出)样式表中的颜色样式。

这可行，但我觉得必须有更巧妙的解决方案。

另外...

我想获取国家代码，例如 countryCode: "it" 并将 {{countryCode}} 的输出与全文字符串“Italy”相关联，所以我不需要需要写出来:

{ countryCode: "it", countryName: "Italy" }

...对于每个玩家。这两者总是相关联的(与任何国家一样)，所以每次都写出来似乎毫无意义。

我们将不胜感激。

Answer 1

编写一个返回所需值的函数怎么样？

$scope.getPlayerClass = function (playerPosition) {

    switch (playerPosition) {

        case 'gk': return 'Green';
        ...
    }
}

像现在一样调用它:

<p class="{{ getPlayerClass(player.position) }}">

同样的原则也适用于国家。如果您需要在多个地方使用它，请将其移动到过滤器。