操作 NG-REPEAT 的第一个元素答案

【问题标题】：Manipulating the first element of NG-REPEAT操作 NG-REPEAT 的第一个元素
【发布时间】：2023-03-18 17:33:03
【问题描述】：

我对 Angular 很陌生，如果这是一个菜鸟问题，我很抱歉。我有一个由 ng repeat 呈现的列表，我想修改具有特定属性设置为“Y”的元素的第一次出现。

<tr ng-repeat="player in player_history" >
<td>....</td>
<td>....</td>
</tr>


player_history = [
                        {
                            "value" : "10",
                            "description" : "rooney"
                            "award" : "y"      
                        },
                        {
                                "value" : "7",
                                "description" : "di maria"
                                "award" : "N"      
                        },
                        {
                                "value" : "1",
                                "description" : "de gea"
                                "award" : "N"      
                        },

                        {
                                "value" : "16",
                                "description" : "carrick"      
                                "award" : "Y"
                        },
                    ];

所以对于第一次出现“Y”的奖励，我想对该元素进行一些修改。例如，例如在表格中显示结果，并让该特定条目以粗体显示。我还是个新手，所以非常感谢所有帮助。并提前非常感谢您。

PS：我也在考虑让 ng-repeat 进行渲染，然后使用 Jquery 进行修改。我一直在尝试，但到目前为止没有。再次感谢您。

【问题讨论】：

看这个答案：stackoverflow.com/questions/19635636/first-in-ngrepeat
谢谢，但我不想编辑第一个元素，只是第一次出现将特定属性设置为“Y”的元素。在这种情况下，第一个元素恰好是它，但它很可能是第 3 个、第 4 个甚至第 n 个元素。
请更正player_history 的格式。在您的每个对象 description 属性之后，您都缺少一个 ,。并在最后一个对象之后删除额外的,。

标签： javascript jquery angularjs

【解决方案1】：

使用 'award' 的值作为类名。

<tr ng-repeat="player in player_history" >
<td class = "{{player.award}}">....</td>
<td class = "{{player.award}}">....</td>
</tr>

并在 CSS 中随意设置样式。

.Y {
   color:green;
   }
.N {
   color:red;
    }

希望这有帮助！

【讨论】：

【解决方案2】：

如果您想要一个特定的类来进行样式设置：

<tr ng-repeat="player in player_history" ng-class="{isY: player.award === 'Y'}" >
  <td>....</td>
  <td>....</td>
</tr>

然后你可以在tr.isY:first-child 上应用你的 CSS 来为第一个设置不同的样式。

现在，如果您希望该元素使用完全不同的 HTML，您应该先将其整理出来。所以在你的控制器中：

for (var i = 0; i < $scope.player_history.length; i++) {
    if ($scope.player_history[i].award === 'Y') {
        $scope.firstYAward = $scope.player_history[i];
        break;
    }
}

然后在您的 HTML 中：

<tr ng-repeat="player in player_history">
  <td ng-if="player === firstYAward">.. specific html for the first Y ..</td>
  <td ng-if="player !== firstAward"> .. regular html for the others .. </td>
</tr>

【讨论】：

【解决方案3】：

有很多方法，但我在这里所做的是获取第一个y 的索引，然后在ng-repeat 使用ng-class 用特定类标记该元素时检查它。这对我有用，

HTML：

<table ng-controller="PlayerController">
    <tr ng-repeat="player in player_history">
        <td ng-class="(player.award=='y' || player.award=='Y') && $index == firstYFound ? 'firstY' : 'restAll'">{{player.description}}</td>
    </tr> 
</table>

AngularJs：

data = [
    {
        "value": "10",
        "description": "rooney",
        "award": "N"
    },
    {
        "value": "7",
        "description": "di maria",
        "award": "N"
    },
    {
        "value": "1",
        "description": "de gea",
        "award": "N"
    },
    {
        "value": "16",
        "description": "carrick",
        "award": "Y"
    }
];

function PlayerController($scope){
    $scope.player_history = data;
    for(var i = 0; i < $scope.player_history.length; i++){
        if($scope.player_history[i].award.toLowerCase() == "y"){
            $scope.firstYFound = i;
            break;
        }
    }
}

jsFiddle

【讨论】：

哇。这看起来不错。谢谢。所以假设不是突出显示，我们还可以根据“Y”的第一次出现来隐藏或显示该行，是吗？喜欢使用 jquery 吗？