Within my angular application, I have implemented a loop to iterate through a collection and display the records using input type="radio".
<tr ng-repeat="account in vm.pagedAccounts.items"
ng-class="{ 'highlight': (account.rowIsSelected) }"
<td>
<input
ng-model="account.rowIsSelected"
value="{{account}}"
name="selectedAccount"
ng-checked="account.rowIsSelected"
ng-change="vm.selectAccount(account)"
type="radio">
</td>
Initially, in the controller, I ensure that the rowIsSelected property is set to false for all accounts.
response.data.results.forEach(function(account) {
account.rowIsSelected = false;
});
The functionality is working as expected, with the ability to highlight the selected account.
However, in the selectAccount function, I want to handle the scenario where clicking on a different account will clear previous highlights and only highlight the currently selected one.
vm.selectAccount = function (account) {
if (account.rowIsSelected) {
// Reset all accounts to false
vm.pagedAccounts.items.forEach(function(account) {
account.rowIsSelected = false;
});
var selectedAccount = vm.pagedAccounts.items
.filter(function(x){
return x.id=== account.id;
});
// Set the property of the selected account to true
selectedAccount[0].rowIsSelected = true;
}
However, when clicking on the same row twice, it is no longer highlighted. I want to maintain the highlight for the selected account.
Could someone guide me on how to achieve this? Is my current approach correct? Any assistance would be appreciated.