I have a group of buttons that are generated from a json object. Whenever a user clicks on a button, it changes color (referred to as the selected color) using the ng-class directive with bootstrap classes. If the same button is clicked again, it reverts back to its default color.
What I am trying to achieve is to set the selected color for each button on page load where the item's SelectedId matches the specific item's Home/AwayTeamId. In other words, if a user has made selections previously, the SelectedId will be a non-zero number that corresponds to either the HomeTeamId or AwayTeamId, and the selected button should display the selected color.
I have attempted to implement this logic in the code below, but unfortunately, the buttons are not toggling at all. I would appreciate it if someone could review my code and provide some guidance. Thank you.
HTML:
<div class="form-horizontal" data-ng-repeat="item in event.Events">
<div class="form-group">
<div class="col-xs-12 col-md-6 col-lg-6">
<button type="button" class="btn form-control"
data-ng-class="[pickChosen == 1 || checkIfChosen(item.SelectedId, item.homeTeamId, 1) ? 'btn-success' : 'btn-default']"
data-ng-disabled="item.Locked === 1"
data-ng-click="buttonToggle($index, 1)">
<span class="hidden">{{item.homeTeamId}}</span>
</button>
</div>
<div class="col-xs-12 col-md-6 col-lg-6">
<button type="button" class="btn form-control"
data-ng-class="[pickChosen == 2 || checkIfChosen(item.SelectedId, item.awayTeamId, 2) ? 'btn-success' : 'btn-default']"
data-ng-disabled="item.Locked === 1"
data-ng-click="buttonToggle($index, 2)">
<span class="hidden">{{item.awayTeamId}}</span>
</button>
</div>
</div>
</div>
Angular:
app.controller('dashController', function ($scope) {
$scope.buttonToggle = function (index, buttonNumber) {
if (buttonNumber === this.pickChosen) {
this.pickChosen = 0;
picks.splice(index, 1);
} else {
this.pickChosen = buttonNumber;
}
};
$scope.checkIfChosen = function(selId, teamId, buttonNumber) {
if (selId === teamId) {
this.pickChosen = buttonNumber;
} else {
this.pickChosen = 0;
}
};
});
Example json object:
[{"EventId":xxxxxxxx,
"HomeTeamId":832,
"AwayTeamId":575,
"Locked":1,
"SelectedId":0
},
{...},
{...}]