http://plnkr.co/edit/pUtuZy?p=preview
In this scenario, there are three different border classes available:
.border1 {
border: 1px solid #66FFFF;
}
.border2 {
border: 1px solid #33CCFF;
}
.border3 {
border: 1px solid #0099FF;
}
The goal is to assign the border1 class to the first button clicked, border2 to the second button clicked, and border3 to the third. Additionally, a restriction will be implemented to limit user selection to only three buttons.
Here is the current logic for the markup:
<div class="tag"
ng-class="{'border1':selected1, 'border2':selected2, 'border3':selected3}"
ng-mouseover="showTagDetails(t)"
ng-click="clickTag(t)">{{t.name}}</div>
The challenge lies in implementing the correct logic to ensure that the second and third buttons receive the appropriate styles. Any suggestions on how to approach this problem?
$scope.clickTag = function(t) {
}