After gathering some data, I have successfully bound it to anchor tags using ng-repeat.
<table style="width: 60%">
<tr>
<td style="text-align: center" ng-repeat="displayyears in displayYears">
<div>
<a href="javascript:void(0)" style="padding: 30px,30px,30px,30px; font-size: 18px" ng-class="StyleOfYear" ng-click="selectedYear(displayyears,this)">{{displayyears}}</a>
</div>
</td>
</tr>
</table>
Here is the CSS code
<style>
.slectedYear {
background-color: red;
}
.loadYear {
background-color: none;
}
</style>
- I'm currently facing an issue where all anchor tags change their background color when clicked. Here's what I've tried:
Javascript code snippet
//Controller
$scope.StyleOfYear = "loadYear";
$scope.selectedYear = function (value, context) {
context.$parent.StyleOfYear = "slectedYear";
$scope.selectedYearValue = value;
}
Unfortunately, my current implementation changes the background color of all anchor tags instead of just the selected one.
My code currently selects all anchor tags when I click on a specific year like 2015.
However, I would like to specifically change the background color of the anchor tag corresponding to 2015 only when it is clicked, keeping all other anchor tag backgrounds non-colored.
This is how I envision the outcome:
I am attempting to implement a menu highlighting feature for active items using ng-repeat, but I am unsure about the best way to achieve this.