I have an array of questions, with each question having a question field and an options field which is essentially an array of string options. The app is being build in Angular.
{
question: "Is this the question?",
options: ["yes", "no", "maybe", "not sure"]
}
The questions are received from a service dynamically, and may change over time. The user must have the option to select more than one options, hence I am using a checkbox. Specifically, PrimeNG's checkbox.
<p-checkbox #checkbox class="checkbox-option" [label]="opt.val" [value]="opt.val" value="opt.val">
</p-checkbox>
The question being, which approach should be used in order to receive the checked options of one question at a time. The checkbox would have a submit button below, after which I'll need to check the checked options.
PS. I am new, if anyone needs any other relevant imformation or piece of code, just notify me. Thanks in advance.
Firstly, use ngModel in your elements, then you can just pull the selected values easily.
Here's an example with a loop
<p-checkbox *ngFor="let opt of boxes" class="checkbox-option"
[label]="opt.val"
[value]="opt.val"
[(ngModel)]="selectedBoxes" >
</p-checkbox>
<button (click)="getSelected()">Get answers</button>
in component.ts
export class SomeComponent {
selectedBoxes: string[] = [];
getSelected() {
console.log(this.selectedBoxes)
}
Related
Here's part of my code:
data() {
return {
dossier: [{
caisse: '', // I change this value with v-model
nom_caisse: 'exempleName' // I want to display this dynamic value in the input
}],
}
}
<input v-model="d.caisse"/>
I just put in the essential information. I didn't put the for. I'm going to go through my "dossier" array and interact on "caisse". It works but I would like to display another field in the input of the "nom_caisse" table. Do you know how to display another value than the v-model?
Edit "Solution":
I've come up with a solution that's a little hard to explain. I put my "d.caisse_name" field in v-model but I get the value of the input with jQuery to search in my api. So my v-model to be different from the value of the input... I understand myself :) Thanks for the suggestions.
I am very new to Angular-material so this question might sound a bit silly, but please bear with me.
I have two checkboxes as following.
<mat-checkbox>Apply for Job</mat-checkbox>
<mat-checkbox>Modify a Job</mat-checkbox>
Let's say a user checked the first checkbox ("Apply for a Job") then later on clicks on "Modify Job" checkbox, I want the application to automatically uncheck the first one. How can I achieve this without using radio-buttons?
You can put a condition on checked attribute, as in this example:
Typescript:
selected=-1;
HTML
<div *ngFor="let item of [1,2,3]; let i = index">
<mat-checkbox [checked]="selected === i" (change)="selected = i">Check me!</mat-checkbox>
</div>
DEMO
I've got a VueJS application which filters items based on a number of checkbox items like a category filter for a shop.
When a user clicks a checkbox, we fire off an API request and a list of updated items is returned. The URL is also updated with a query string representing the checkbox that they have selected.
If a user navigates to a query stringed URL we want to have the checkboxes relating to the filters in the query string checked. That way if there is a page refresh, all the same checkboxes are checked.
We've done this so far using an if(window.location.search) and then parsing that query string, adding the parsed query string into an object. Passing that object down into the child component as a prop then setting the model the checkboxes are bound to to the query string object on update.
This works and is fine. The issue is theres stuttering and flashing of the checkboxes. You click the checkbox, it initially unchecks after selecting, the when the API response comes back, it select. Not very good for UX. I'm assuming this is because we're modifying the model the checkboxes are bound to while also trying to update it on checkbox click.
So I'm wondering if there's a better way of doing this please and if someone else has tackled a similar issue.
I've attached some code below, but as its spread across multiple components its quite hard to display here.
Thanks
<template>
<ul>
<li v-for="(filter, index) in filters" v-bind:key="index">
<input type="checkbox" name="filters" v-model="checked" v-on:change="changeItems">{{filter.filterName}}
</li>
{{checked}}
</ul>
</template>
<script>
export default {
data() {
return {
checked: []
}
},
props: [
'filters',
'checkedFilters' //passed object of filters in query string
],
updated: function() {
this.checked = this.checkedFilters
},
methods: {
changeItems: function (){
this.$emit('change-items', this.checked)
}
}
}
</script>
I have a couple of radios (#LocalDelivery and #StandardShip) related to a couple text inputs (#LocalDate and #datepicker). Then, off in another section is another text input with class productAttributeValue.
If LocalDelivery is chosen/checked, I need its input, #LocalDate to get the value and name from the input with class productAttributeValue. Or, if #StandardShip is chosen/checked I need its input, #datepicker, to get the value and name from the input with class productAttributeValue.
I have tried various combinations of the following:
if (!$('#LocalDelivery').is(":checked")) {
$('#datepicker').val("");
$('#LocalDate').val($('.productAttributeConfigurableEntryText div.productAttributeValue input[type="text"]').val());
$('#LocalDate').attr('name',
$('.productAttributeConfigurableEntryText div.productAttributeValue input[type="text"]').attr('name'));
}
if (!$('#StandardShip').is(":checked")) {
$('#LocalDate').val("");
$('#datepicker').val($('.productAttributeConfigurableEntryText div.productAttributeValue input[type="text"]').val());
$('#datepicker').attr('name',
$('.productAttributeConfigurableEntryText div.productAttributeValue input[type="text"]').attr('name'));
}
Per my other thread, Issue with jQuery 'else', this method isn't working. According to the answers given there, this is the wrong method entirely but I'm not sure how else to go about this.
Here is a fiddle:
This is my glorious Fiddle
EDIT:
Per beautifulcoder's comment I have added a click function to both radios. While it would be preferable for the inputs to populate their value without clicking first, this is the first solution I've had that works. Created a fiddle here, hope it helps someone else:
My amazing working Fiddle
I want to say hello to the stackoverflow community.
I've just started using knockout a few days ago.
Right know I'm using it to make a dynamic menu builder for a CMS I'm working on.
Here is the code: http://jsfiddle.net/dnlgmzddr/HcRqn/
The problem is that when I choose an element from the select box, the input field update as I expect, but the observable doesn't reflect the change. Because of that, the add button is not enabled.
What am I missing? How can I fix it?
Thank you.
When you populate the url field, you would need to trigger the change event to get the observable to be upated. So, you could do:
$("#url").val('/pages/' + id).change();
Another option though that is more in the Knockout spirit is to use a binding on your select. In this case, you would likely want to populate an observable with that value, then use a manual subscription to default the formatted value into the input field.
this.itemUrl = ko.observable();
this.selectedUrl = ko.observable();
this.selectedUrl.subscribe(function(newValue) {
if (newValue) {
this.itemUrl("/pages/" + newValue);
}
}, this);
Then, bind your select to selectedUrl:
<select id="pagedList" data-bind="value: selectedUrl">
<option value=""><option>
<option value="test">Test</option>
</select>
Here is a sample: http://jsfiddle.net/rniemeyer/HcRqn/21/
You could also eliminate the extra observable and manual subscription if the "value" of your options was the url.
I can't see anywhere in your code where you are actually enabling the button when a field is selected. So I might be missing something, but just enable the button on change. Like the following:
function LoadMenu() {
$("#pagedList").change(function () {
var id = $(this).val();
$("#url").val('/pages/' + id);
// remove the disabled attribute here
$('button.space').removeAttr('disabled');
});
}