Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/433.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 操纵NG-REPEAT的第一个元素_Javascript_Jquery_Angularjs - Fatal编程技术网

Javascript 操纵NG-REPEAT的第一个元素

Javascript 操纵NG-REPEAT的第一个元素,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我对angular很陌生,如果这是一个noob问题,我很抱歉。我有一个由ng repeat呈现的列表,我想修改元素的第一次出现,它的particluar属性设置为Y <tr ng-repeat="player in player_history" > <td>....</td> <td>....</td> </tr> player_history = [ {

我对angular很陌生,如果这是一个noob问题,我很抱歉。我有一个由ng repeat呈现的列表,我想修改元素的第一次出现,它的particluar属性设置为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进行修改。我一直在尝试,但到目前为止什么都没有。再次感谢。

使用“奖励”的值作为类名

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

跳这个有帮助

如果您想要一个特定的类用于样式设置:

<tr ng-repeat="player in player_history" ng-class="{isY: player.award === 'Y'}" >
  <td>....</td>
  <td>....</td>
</tr>
然后在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>

有很多种方法,但我在这里做的是获取第一个y的索引,然后在ng重复时检查它,使用ng类用特定类标记该元素。这是对我有用的东西

HTML:

AngularJs:


看看这个答案:谢谢,但我不想编辑第一个元素,只是元素的第一个出现,它有一个特定的属性设置为Y。在这种情况下,第一个元素正好是它,但它很容易是第三个、第四个甚至第n个元素。请更正玩家历史记录的格式。在每个对象描述属性之后缺少一个。在你的最后一个物体之后,再去掉多余的。这个看起来不错。谢谢因此,假设我们也可以隐藏或显示该行,而不是突出显示,这取决于Y的首次出现,是吗?比如使用jquery?
for (var i = 0; i < $scope.player_history.length; i++) {
    if ($scope.player_history[i].award === 'Y') {
        $scope.firstYAward = $scope.player_history[i];
        break;
    }
}
<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>
<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>
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;
        }
    }
}