Question

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

GK：Green，
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属性上为每个动态生成类的玩家使用了一个文字角度表达式（以及段落标记中的以下字符串输出），我将其硬编码为颜色样式在样式表中。

这很有效，但我觉得必须有一个更流畅的解决方案。

另外...

我想采用国家/地区代码，例如countryCode: "it"并将{{countryCode}}的输出与全文字符串相关联，＆＃34;意大利＆＃34;，所以我不会需要写出：

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

......对于每个球员。这两个将永远相关联（与任何国家一样），因此每次都写出来似乎毫无意义。

将非常感激地收到任何帮助。

Answer 1

如何编写一个可以返回所需值的函数呢？

$scope.getPlayerClass = function (playerPosition) {

    switch (playerPosition) {

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

在调用它时就像你现在一样：

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

同样的原则可以用于该国。如果您需要在多个地方使用它，请将其移至过滤器。

Answer 2

关于这个职位，我不确定我是否理解你的问题，你可以在你的控制器中定义一个地图并在那里映射你想要的任何信息。并使用它：

<p class="{{positionsMap[player.position].class}}">

对于国家/地区，您可以定义变量italy，并在每个播放器中使用它，这样您就不会重复相同的代码。这些职位也可以这样做。 E.g：

var italy = { countryCode: "it", countryName: "Italy" }
var gk = {class: 'green', name: 'Goal keeper'}
var player1 = {position: gk, country: italy}
var player2 = {position: gk, country: italy}

在最后一种情况下，要在html中使用它，它将是：

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

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

另外...

2 个答案: