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

【问题标题】：Dynamically create class in ng-repeat, and associate properties在 ng-repeat 中动态创建类，并关联属性
【发布时间】：2016-03-01 12:53:07
【问题描述】：

我想对足球队中的一组球员运行 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 属性上为每个播放器使用文字角度表达式，它动态生成类（以及段落标签中的以下字符串输出），我已将其硬编码为颜色样式样式表。

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

另外...

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

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

...对于每个玩家。这两个总是相关联的（就像任何国家一样），所以每次都写出来似乎没有意义。

我们将不胜感激。

【问题讨论】：

为什么您对这个解决方案不满意？这是一个有效的。
因为就像下面的第二个类似问题（'另外...），我必须使用相同的字符串来指示类作为 html 文本输出：在这种情况下，'gk'，或者'mf'（或其他）。每当在“位置”属性中找到“mf”值时，我希望选择输出“中场”。就像我希望在“countryCode”属性中找到“it”值时输出“Italy”一样。

标签： css angularjs class properties ng-repeat

【解决方案1】：

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

$scope.getPlayerClass = function (playerPosition) {

    switch (playerPosition) {

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

像现在一样调用它：

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

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

【讨论】：

【解决方案2】：

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

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

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

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>

【讨论】：