I am in the process of creating a set of image "radio buttons" where only one can be selected per group. However, as a newcomer to Angular, I'm facing difficulties in maintaining the value and using it as my ng-model.
Additionally, I am looking for a simple solution to ensure that selected images remain at full opacity while switching between groups. For example, selecting an item in Group 1 should maintain its opacity even when selecting an item in Group 2.
You can view the issue with value updating and opacity discrepancies in this JSFiddle Demo which showcases two groups of image selections.
HTML (The Angular code contains variables s1, s2, etc.)
<div style="background:white">
<input value="2" class="pastElos" name="season1" type="image" src="{{images[0].source}}" title="Season1 Bronze" ng-model="s1" style="width:70px; height:75px" />
<input value="3" class="pastElos" name="season1" type="image" src="{{images[1].source}}" title="Season1 Silver" ng-model="s1" />
<input value="4" class="pastElos" name="season1" type="image" src="{{images[2].source}}" title="Season1 Gold" ng-model="s1" />
<input value="5" class="pastElos" name="season1" type="image" src="{{images[3].source}}" title="Season1 Platinum" ng-model="s1" />
<br />
Current Season 1 Value:<span style="color:black">{{s1}}</span>
<hr />
<input value="6" class="pastElos" name="season2" type="image" src="{{images[0].source}}" title="Season2 Bronze" ng-model="s2" style="width:70px; height:75px" />
<input value="7" class="pastElos" name="season2" type="image" src="{{images[1].source}}" title="Season2 Silver" ng-model="s2" />
<input value="8" class="pastElos" name="season2" type="image" src="{{images[2].source}}" title="Season2 Gold" ng-model="s2" />
<input value="9" class="pastElos" name="season2" type="image" src="{{images[3].source}}" title="Season2 Platinum" ng-model="s2" />
<br />
Current Season 2 Value:<span style="color:black">{{s2}}</span>
</div>
TLDR ISSUES JSFiddle Demo
Need a method to track the currently selected values for each season (s1, s2).
Seeking a way to maintain full opacity on selected items across different groups.