We Keep Coding

How to toggle click a single elements CSS class in Angular 2?

I'm looping through an API response and displaying some items (female and male age groups) on a page with the following code:
<ng-container *ngFor="let event of day.availableEvents">
{{ event.name }}
<br>
<ng-container *ngFor="let maleAgeGroup of event.maleAgeGroups">
<span [class.is-active]="status" (click)="updateStatus()" {{ maleAgeGroup }}</span>
</ng-container>
</ng-container>
And, this the JSON data I'm working with:
"days": [
{
"date": "2021-04-14T00:00:00.000Z",
"availableEvents": [
{
"id": 1,
"name": "Event A",
"femaleAgeGroups": ["U13", "U15", "U17"],
"maleAgeGroups": ["U13", "U15", "U17"]
},
{
"id": 2,
"name": "Event B",
"femaleAgeGroups": ["U13", "U15", "U17"],
"maleAgeGroups": ["U13", "U15", "U17"]
},
]
}
]
On click of an age group I want to toggle its status from true or false so that the is-active CSS class is add/removed.
No matter what SO answer I try, I can't get it to work and in most cases end up with an error like 'Cannot assign status to type string'. This is why I've stripped back the above code right to basics - maybe it's because of the way my data is structured?
The example below is what I'm trying to end up with, where the highlighted text has been clicked and is-active class applied:

[class.is-active] needs to 'bind' to a value, it is unclear to me the intent of what you trying to do as a whole, but, each age group needs a state. Thus, you need to update/modify your data either from the server or augment in your component with the status for each age group...
"femaleAgeGroups": [{name:"U13", active:true}, {name:"U15", active:false}, {name:"U17", active:false}], etc..
Then in the template you can bind the css class to the boolean value
<ng-container *ngFor="let maleAgeGroup of event.maleAgeGroups">
<span [class.is-active]="maleAgeGroup.active" (click)="updateStatus(maleAgeGroup)" {{ maleAgeGroup.name }}</span>
</ng-container>
.. and to update you pass the item to update function and update its active state:
updateStatus(item:any): void {
item.active = !item.active;
}

How do I find a radio button by value to check it with another element - VueJS

I apologize for the title being a little hard to understand. I had a hard time explaining it in one line. But here's what I'm trying to do.
I'm developing a screen within my app that supports a barcode gun reader. Barcode guns can only interact with textfields. And then through a text field(hidden) I can pass a custom barcode that instructs the UI to do something. Here is the UI explanation for clarity:
I have a radio button group with 2 options (yes and no)
I have a hidden textfield to accept the barcode gun read
I have a barcode for "yes" and another for "no"
If I scan the "yes" barcode, the radio button option with value = "Yes", should be checked
If I scan the "no" barcode, the radio button option with value = "No", should be checked
I initially thought that by changing the v-model to the correct value, it will do it, but it didn't check it. Likewise, by changing the v-model.value to true or false it will check to its appropriate value. But no cigar.
My idea on how this would work is by (pseudocode)
if querySelector with name ragrouphidden.value = "Yes" then find the option whose value is Yes and option.checked = true
else if querySelector with name ragrouphidden.value = "No" then find the option whose value is No and option.checked = true
The "find" part is what eludes me, or maybe there is an easier way.
Here's some relevant code
Template
<div>
<q-input
class="hidden-field"
v-model="ragrouphidden"
name="ragrouphidden"
#change="raSelectOption()">
</q-input>
<div>
<label class="col-6 text-weight-medium">Mark for Remote Adjudication</label>
<div>
<q-option-group
v-model="ragroup"
:options="raoptions"
#check="raRules($event.target.value)"/>
</div>
</div>
</div>
Script
data() {
return {
ragrouphidden: "",
ragroup: null,
raoptions: [
{
label: "Yes",
value: true
},
{
label: "No",
value: false
}
],
}
},
methods: {
raSelectOption() {
setTimeout(() => {
let hasFocus = document.querySelector("input[name=ragrouphidden]");
hasFocus.focus();
}, 500);
if (
document.querySelector("input[name=ragrouphidden]").value === "*yes*"
) {
this.ragroup.value = true; //this is what I need
} else if (
document.querySelector("input[name=ragrouphidden]").value === "*no*"
) {
this.ragroup.value = false; //This as well
}
},
}
Hopefully it makes sense to you guys. Thanks in advance.

You don't need to use ragroup.value to set the model value here. You can simply do this.ragroup = true; and vue will automatically set the q-option-group selected value for you behind the scene.
A simple demo with dynamic checkbox:
var demo = new Vue({
el: '#demo',
data: {
checked: [],
categories: [{ Id: 1 }, { Id: 2 }]
},
mounted(){ this.checked = [2] }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="demo">
<ul>
<li v-for="c in categories">
<input type="checkbox" :value="c.Id" :id="c.Id" v-model="checked" />
{{c.Id}}
</li>
</ul>
</div>

Angularjs dropdown grouping

How do i group dropdown values in Angularjs?
HTML:
<div ng-model="tsInput" id="tsInput"
name="tsInput" multi-select input-model="atsInDB"
output-model="atsOut" button-label="shortenedName"
item-label="shortenedName" tick-property="ticked" max-height="500px"
selection-mode="single" max-labels="0" orientation="vertical"
default-label="{{'MUSELECTED'|translate}}" helper-elements="filter"
on-item-click="updateProfileList()"
on-enter="handleInput(labelFilter)"
group-property="categoryName">
</div>
Js code
tsInput =
SkillNotInProfile: true
categoryName: "Others"
categoryUUID: ""
description: "Test description"
name: "CSV"
shortenedName: "<span title="Comma-separated values (CSV)">Others : CSV</span>"
I expect the grouped dropdown values like https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup
Please note that the above link is just output reference only.

Using expression in ngmodel in angular 1.2

I am trying to show checkboxes checked or unchecked based on certain condition. for eg:
$scope.userRoles = {"grants" : [
"Permission",
"View",
"Update",
"Delete"
]}
On the HTML part i have added the following code:
<div ng-repeat="p in userRoles">
<input type="checkbox" ng-model="p.grants.indexOf('Delete') != -1?true:false" ng-change="AddRemovePermission(p,'Delete')" />
</div>
If i use ng-checked instead of ng-model than it works fine, but i will not get 2 way binding with that. Also i know we cant use expressions like above in ng-model.
Can anybody help on how this can be done. The only condition is if user has grants than the checkbox should be checked else not, and when clicked on checkbox it should be changed to checked or unchecked accordingly and gets added in the userRoles object. Cant use directive as well.
Thanks.

The problem is your model. You must send boolean to backend, this can be a solution:
In view:
<div ng-repeat="role in userRoles.grants">
<input type="checkbox" ng-model="role.checked" />
</div>
And in controller:
$scope.userRoles = {"grants" : [
{"permission": "Permission", checked: true },
{"permission": "View", checked: false },
{"permission": "Update", checked: true },
{"permission": "Delete", checked: true }
]}

Select box placeholder in HTML Template

Code in controller:
$scope.infoOptions = [
{ name: 'Select Option', value: '0' },
{ name: 'Some Option', value: '1' }
];
HTML:
<select data-ng-model="nothing" data-ng-options="info.name for info in infoOptions ">
</select>
Angular puts that damn empty option at the top/selected by default. I've seen some answers to this question that suggest selecting a default option in the $scope for the form, but this select box is in a template in a dynamic form (ie. can be a number of select boxes). This is really only for demonstration purposes - is there anyway I can get rid of that empty option in a template?