Manipulating the first element of NG-REPEAT

Question

im pretty new to angular and im sorry if this a noob question. I have a list rendered by ng repeat and i want to modify the first occurance of the element which has a particluar attribute set as "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"
                        },
                    ];

so for the first occurrance of award as "Y", i want to make some modifications to the that element. like for example display the results in the table and lets say make that particular entry in bold. im still a newbe so all the help is much appreciated. and thank you very much in advance .

PS: i was also thinking along the lines to let ng-repeat do the rendering and then use Jquery to modify as i wanted.ive been trying but nothing so far.Thank you once again.

Look at this answer: http://stackoverflow.com/questions/19635636/first-in-ngrepeat — Aviv Shaked, Jan 30 '15 at 06:25
thank you , but i dont want to edit the first element, just the first occurance of the element which has a particular attribute set as "Y". in this case the first element happened to be it, but it could easily be the 3rd , 4th or even nth element. — Vaishak P Dinesh, Jan 30 '15 at 06:28
please do correct the format of `player_history `. You are missing a `,` after each of your objects `description` property. And also remove the extra `,` after your last object. — Md Ashaduzzaman, Jan 30 '15 at 06:30

score 0 · Answer 1 · answered Jan 30 '15 at 06:33

Use value of 'award' as a class name.

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

and style them as you like in CSS.

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

Hop this helps!

floribon · Answer 2 · 2015-01-30T06:40:39.743

If you want a specific class for styling purposes:

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

Then you can apply your CSS over tr.isY:first-child to style this first one diferently.

Now if you want a totally different HTML for that element, you should rather sort it out before. So in your controller:

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

and then in your 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>

Md Ashaduzzaman · Accepted Answer · 2015-01-30T09:19:41.973

There can be many ways, but what I did here is getting the index of the first y and later check it while ng-repeat to mark that element with a particular class using ng-class. Here's what worked for me,

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

wow. this looks nice. thanks. so suppose instead of highlighting , we could also hid or show that row depending on the first occurance of "Y", yeah ? like by using jquery ? — Vaishak P Dinesh, Jan 30 '15 at 09:34

Manipulating the first element of NG-REPEAT

3 Answers3