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.
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!
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>
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;
}
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.