I'm working with BootstrapVue.
I have following problem. I have a b-form-input where I'm searching for my number over my b-form-select. So I'm selecting 3 values and get a number in my input field and other way around - so it's an Autofill.
This works fine - and because of that I think I don't need to show you the code.
The problem is that I want to disable all selects (instead of the first) till the field before was selected.
I have problem that if I have multiple elements all will be updated. So if I input something in Input1 in the first element the second Input of all other elements will be !disabled
Additional Info: IDParent is a prop!
If you need any additional code, I can update my question!
<template>
<div>
<div class="mt-2" v-for="(IDChild, indexChild) in inputs" :key="indexChild">
<div>
<div class="mt-2">Number</div>
<b-form-input type="number" v-model="IDChild.Number" :value="IDChild.Number"></b-form-input>
</div>
<div>
<div class="mt-2">Input 1</div>
<b-form-select v-model="IDChild.Input1" :value="IDChild.Input1" :options="optionsInput1" #input="searchNumber(IDChild, IDParent, indexChild)"></b-form-select>
</div>
<div>
<div class="mt-2">Input 2</div>
<b-form-select :disabled="disabledInput2" v-model="IDChild.Input2" :value="IDChild.Input2" :options="optionsInput2" #input="searchNumber(IDChild, IDParent, indexChild)"></b-form-select>
</div>
<div>
<div class="mt-2">Input 3</div>
<b-form-select :disabled="disabledInput3" v-model="IDChild.Input3" :value="IDChild.Input3" :options="optionsInput3" #input="searchNumber(IDChild, IDParent, indexChild)"></b-form-select>
</div>
</div>
<!-- add new element when button was clicked -->
<div class="mt-4 mb-5 ml-3 mr-3">
<b-button #click="addElement"> Add Element </b-button>
</div>
</div>
</template>
my script:
<script>
import json from "./json/json.json";
export default {
name: "Test",
methods: {
addElement() {
this.inputs.push({});
},
searchNumber(input, IDParent, indexChild) {
input.Number = "";
this.json.forEach((element) => {
if (
element.Input1 == input.Input1 &&
element.Input2 == input.Input2 &&
element.Input3 == input.Input3
) {
for (const key of Object.keys(element)) {
input[key] = element[key];
}
}
});
if(input.Input1) {
this.disabledInput2 = false;
}
if(input.Input2) {
this.disabledInput3 = false;
}
},
},
props: [
"IDParent",
],
data() {
return {
inputs: [{}],
json: json,
disabledInput2: true,
disabledInput3: true,
};
},
};
</script>
What you are missing is a multi-layer model for your data which you can call in your searchNumber function and call for your :disabled attribute.
In your v-for="(IDChild, indexChild) in inputs" you could use IDChild or indexChild for that. For example you would call :disabled="disabledInput2[indexChild]". That way you would refer to disabledInput2 with the specific indexChild.
You also need to handle this in your function, for example this.disabledInput2[indexChild] = false;.
Basically it´s the same as storing multi-layer data in the same object with v-model.
EDIT: Generally Example
I´ve created the following properties for this example. We have myNumberInput as an object to handle multiple input fields for numbers. mySelectionData provides a simple collection of two objects with 3 selection arrays each. myDisableData is the object that will handle multiple disabled attributes for this selections:
myNumberInput: {},
mySelectionData: {
1: {
1: [
{ name: "1A", value: 1 }, { name: "2A", value: 2 }, { name: "3A", value: 3 }
],
2: [
{ name: "4A", value: 4 }, { name: "5A", value: 5 }, { name: "6A", value: 6 }
],
3: [
{ name: "7A", value: 7 }, { name: "8A", value: 8 }, { name: "9A", value: 9 }
]
},
2: {
1: [
{ name: "1B", value: 11 }, { name: "2B", value: 21 }, { name: "3B", value: 31 }
],
2: [
{ name: "4B", value: 41 }, { name: "5B", value: 51 }, { name: "6B", value: 61 }
],
3: [
{ name: "7B", value: 71 }, { name: "8B", value: 81 }, { name: "9B", value: 91 }
]
}
},
myDisableData: {}
From the mySelectionData object, we will build our myDisableData with this function:
setupMyDisableData() {
Object.keys(this.mySelectionData).forEach(parent_key => {
Object.assign(this.myDisableData, {[parent_key]: {}})
Object.keys(this.mySelectionData[parent_key]).forEach(child_key => {
Object.assign(this.myDisableData[parent_key], {[child_key]: true})
});
});
}
This will loop trough our "parents", assign their index to myDisableData and also loop trough the "childs" and assign their index to myDisableData with the "parent"-index as a pointer. After that we have a multi-layer object which is able to provide diabled= true or false for each selection.
The html for this example looks like this:
<div v-for="(item,index) in mySelectionData" :key="index">
<input type="number" v-model="myNumberInput[index]" #input="enableMySelection(index, myNumberInput[index])">
<div v-for="(child_item, child_index) in item" :key="child_index">
<select :disabled="myDisableData[index][child_index]">
<option v-for="(child_option, child_option_index) in child_item" :key="child_option_index" :value="child_option.value">{{child_option.name}}</option>
</select>
</div>
</div>
As I don´t use BootstrapVue, my html looks different, but I guess you will get the trick. You simply now refer to the three object by the index of "parent" and "child". In this example the function enableMySelection will enable a selection depending on the number entered in the input. The function looks like this:
enableMySelection(parent_index, input_number) {
Object.keys(this.myDisableData[parent_index]).forEach(child_key => {
this.myDisableData[parent_index][child_key] = true;
});
this.myDisableData[parent_index][input_number] = false;
}
So if you enter "2" in your first input, it will enable the second selection of the first block. If you enter 1 in the second input, it will enable the first selection in the second block.
As I said, this is just a generally example but this should be enough to help you define the structure to handle your multiple inputs and selections.
Related
I have a dropdown that works well with simple values, but I just tried using arrays as values and now the initial dropdown-entry is empty.
I have created a REPL to illustrate the problem. As you can see I have also tried using selected=... to automatically select the first entry, but it doesn't work.
The only thing I can think of is to introduce another property to go back to simple values and then extract the array by filtering the original array, but it seems rather cumbersome. I wonder if there is another, more elegant, way that I'm missing.
Thank you in advance!
Edit: Here the code example as suggested:
<script>
const availableFilters = [
{ key: ['filterAll'], display: 'All Columns' },
{ key: ['name1', 'name2' ], display: 'Entry Names' },
{ key: ['ID1', 'ID2' ], display: 'Entry IDs' },
{ key: ['name1'], display: 'Entry 1 Name' },
{ key: ['ID1'], display: 'Entry 1 ID' },
{ key: ['name2'], display: 'Entry 2 Name' },
{ key: ['ID2'], display: 'Entry 2 ID' },
];
const simpleAvailableFilters = [
{ key: 'filterAll', display: 'All Columns' },
{ key: 'name1', display: 'Entry 1 Name' },
{ key: 'ID1', display: 'Entry 1 ID' },
{ key: 'name2', display: 'Entry 2 Name' },
{ key: 'ID2', display: 'Entry 2 ID' },
];
let currentFilter = { key: ['filterAll'], value: "", code: 0 };
let simpleCurrentFilter = { key: 'filterAll', value: "", code: 0 };
</script>
Dropdown with array values:
<select bind:value={currentFilter.key}>
{#each availableFilters as filter, i}
<option selected={i === 0 ? 'selected' : ''} value={filter.key}>{filter.display} - {i}</option>
{/each}
</select>
<span>
Selected key: {currentFilter.key}
</span>
<br/>
Simple Dropdown:
<select bind:value={simpleCurrentFilter.key}>
{#each simpleAvailableFilters as filter, i}
<option value={filter.key}>{filter.display} - {i}</option>
{/each}
</select>
<span>
Selected key: {simpleCurrentFilter.key}
</span>
Simply replace
let currentFilter = { key: ['filterAll'], value: "", code: 0 };
by
let currentFilter = availableFilters[0];
Even though the object has the exact same structure, it's still a different object that the one on the first position in the array. {} === {} // false The same applies to arrays.
['filterAll'] === ['filterAll'] // false
'filterAll' === 'filterAll' // true
currentFilter would have then this structure
{key: *bindedValue*, display: 'All Columns'}
If you want to extract the array you have to access the key when setting the initial value
let currentFilter = availableFilters[0].key;
and change the binding on the option
<select bind:value={currentFilter}>
REPL
A Repl is great to have, but it would be better to include the code as well, in case the Repl might break...
Try this:
let currentFilter = availableFilters[0].key;
and you can remove selected={i === 0 ? 'selected' : ''} from the option.
See https://svelte.dev/tutorial/select-bindings
In my Vue/Nuxt project I have a form where the user can add update dynamic fields to be used in a price offer calculation.
When the form loads there will be created one field with the beforeMount lifecycle, and the user can then choose to create one or more extra fields.
in my data return I have this:
data() {
return {
calculationFields: { qty: 0, price: 3.86, selected: false },
}
}
And when the user click the "Add field" button the addField method is called:
addField() {
this.$store.dispatch('quantity/updateAdd', this.calculationFields)
},
where the updateAdd actions calls the UPDATE_ADD_ITEM mutation
UPDATE_ADD_ITEM(state, value) {
state.options.push(value)
},
value is { qty: 0, price: 3.86, selected: false }
this works fine as the options array is updated with the new field object
In the template I loop on this array to output X number of fields
<div v-for="(field, index) in getCalculationFields()" :key="field" class="flex-xs justify-between calculation-field">
<InputCustomPlaceholder type="number" :is-required="true" :input-id="`calculation-${index}`" :input-name="`calculation-${index}`" label-text="" placeholder-text="Add pieces" custom-placeholder-text="pcs" extraclass="flex-1 no-margin" />
×
</div>
My problem now is, that I can't figure out how I can use v-model on each dynamically created input fields so that I can update the qty value in the field object in the options state.
So if the list contains three fields like:
[
{ qty: 0, price: 3.86, selected: false },
{ qty: 0, price: 3.86, selected: false },
{ qty: 0, price: 3.86, selected: false }
]
So when the use in field number 2 input 200 as quantity the array will look like this:
[
{ qty: 0, price: 3.86, selected: false },
{ qty: 200, price: 3.86, selected: false },
{ qty: 0, price: 3.86, selected: false }
]
I believe I have to use something like
<InputCustomPlaceholder type="number" :is-required="true" :input-id="`calculation-${index}`" v-model="updateOptionList" :input-name="`calculation-${index}`" label-text="" placeholder-text="Add pieces" custom-placeholder-text="pcs" extraclass="flex-1 no-margin" />
But what is the best what to find the index of the field and update the value in that index on the array.
In a non-dynamic input I use something like this:
v-model="updateFieldOne"
updateFieldOne: {
set(value) {
this.$store.dispatch('fields/updatePartDimeWidth', value)
}
}
which works as intended.
You can give index props, and use it in mutation. EDIT_ITEM mutation help for edit item if you want add new elemenet use state.options.push(value).
this.$store.dispatch('fields/updatePartDimeWidth', {value ,index})
EDIT_ITEM(state, {value ,index }) {
state.options[i] = value
},
I am working on a housing form and I am stuck somewhere and I am hoping someone give me a solution to my problem.
So, when you select in a form that your house have 2 floors, then you get to write each floor how many rooms, toilets, balcony etc has..
My issue is to "group" these answers somehow that I could send it to my backend and "read" those answers.
so this is what I did so far:
data() {
return {
flooroptions: [
{
name: 'Rooms',
id: '1',
},
{
name: 'Balcony',
id: '2',
},
{
name: 'Toilets',
id: '3',
},
],
floors: '',
floor1: [],
},
}
and if I loop through like this:
<div class="" v-for="(opt, index) in flooroptions">
<input type="number" name="" value="" v-model="floor1[index]">
</div>
I can see my data using floor1:
{{ floor1 }}
But if in the form someone selects that 1st floor has 2 rooms and does not add any other input than I get to floor1 only 2
How would be better approach for this type of problem ??
PS. Everyfloor will have this flooroptions loop and they can input number of each option for each floor, and I want to be able to read that number correctly..
if I understand correctly, I would...
data() {
return {
flooroptions: [
{
name: 'Rooms',
id: '1',
},
{
name: 'Balcony',
id: '2',
},
{
name: 'Toilets',
id: '3',
},
],
numFloors: 2,
floorData: [
{'Rooms':0, 'Balcony':0, 'Toilets':2},
{'Rooms':2, 'Balcony':1, 'Toilets':0}
],
},
}
and loop through like this:
<div v-for="f in numFloors">
<div class="" v-for="opt in flooroptions">
<input type="number" name="" value="" v-model="floorData[f][opt.name]">
</div>
</div>
or... if you want to pass less data and the id's are know on the backen
data() {
return {
flooroptions: {
1: {
name: 'Rooms'
},
2: {
name: 'Balcony'
},
3: {
name: 'Toilets'
},
},
numFloors: 2,
floorData: [
{1:0, 2:0, 3:2},
{1:2, 2:1, 3:0}
],
},
}
and loop through like this:
<div v-for="f in numFloors">
<div class="" v-for="(opt, i) in flooroptions">
<input type="number" name="" value="" v-model="floorData[f][i]">
</div>
</div>
I am trying to use ng-repeat to iterate through an array of objects and use each objects ID to look up the data binded to a checklist model.
I have the following javascript object in a project I'm working on:
{
diagnosis: {
mainfractures: [
{
id: "metacarpal",
textinput_id: "metacarpal_text",
title: "5th Metacarpal",
},
{
id: "proximal_phalanx",
textinput_id: "proximal_phalanx_text",
title: "Proximal Phalanx",
},
{
id: "middle_phalanx",
textinput_id: "middle_phalanx_text",
title: "Middle Phalanx",
},
{
id: "distal_phalanx",
textinput_id: "distal_phalanx_text",
title: "Distal Phalanx",
},
{
id: "scaphoid_fracture",
textinput_id: "scaphoid_fracture_text",
title: "Scaphoid Fracture",
}
]
}}
Here is what I have for my checklist model. As the user selects a checkbox, a value is binded to the array associated with that fracture.
$scope.checklists = {
"diagnosis": {
metacarpal: [],
proximal_phalanx: [],
middle_phalanx: [],
distal_phalanx: [],
scaphoid_fracture: []
}
}
Checklist Image Example
Once a users makes a selection similar to the image above the the checklist model for metacarpal should look like this: metacarpal: ["head"]
What I'm trying to do is list each of the users selection in bulletpoint via fracture.id. I'm trying to accomplish it with this piece of code but it's only listed the fracture title so far. is it a problem with trying to interpolate fracture.id into ng-repeat?
<div ng-repeat="fracture in diagnosis.mainfractures">
<div > <!--ng-if="checklists['diagnosis'][fracture.id] > 0"-->
<h4>{{ fracture.title }}</h4>
<div class="row">
<ul type="disc">
<li ng-repeat="selection in checklists['diagnosis'][fracture.id]">
• {{ capitalize(selection) }}
</li>
</ul>
</div>
</div>
</div>
Based on your supplied code, I'd have to say your issue is actually due to JS syntax errors. You're missing commas after each object item and there is a random double quote here scaphoid_fracture"[].
$scope.checklists = {
"diagnosis": {
metacarpal: []
proximal_phalanx: []
middle_phalanx: []
distal_phalanx: []
scaphoid_fracture"[]
}
}
Here is a fully working jsfiddle
Adjusted the code a bit:
capitalize ->
uppercase(https://docs.angularjs.org/api/ng/filter/uppercase)
some syntax errors
But seems that access by dynamic object key inside ng-repeat works pretty correct
https://jsbin.com/rodecosoyo/1/edit?html,js,output
Angular Application
var app = angular.module('arrayid', []);
app.controller('arrayContainerCtrl', function($scope) {
$scope.diagnosis = {
mainfractures: [{
id: "metacarpal",
textinput_id: "metacarpal_text",
title: "5th Metacarpal",
}, {
id: "proximal_phalanx",
textinput_id: "proximal_phalanx_text",
title: "Proximal Phalanx",
}, {
id: "middle_phalanx",
textinput_id: "middle_phalanx_text",
title: "Middle Phalanx",
}, {
id: "distal_phalanx",
textinput_id: "distal_phalanx_text",
title: "Distal Phalanx",
}, {
id: "scaphoid_fracture",
textinput_id: "scaphoid_fracture_text",
title: "Scaphoid Fracture",
}]
};
$scope.checklists = {
"diagnosis": {
metacarpal: ['1', '2'],
proximal_phalanx: ['2', '3'],
middle_phalanx: ['3'],
distal_phalanx: ['4'],
scaphoid_fracture: ['5']
}
};
});
Markup:
<body ng-app='arrayid' ng-controller='arrayContainerCtrl'>
<div ng-repeat="fracture in diagnosis.mainfractures">
<h4>{{ fracture.title }}</h4>
<div class="row">
<ul type="disc">
<li ng-repeat="selection in checklists['diagnosis'][fracture.id]">
• {{ selection | uppercase }}
</li>
</ul>
</div>
</div>
</body>
I have html page using angular.
I have a table with ng-repeat on array:
<tr ng-repeat="oblig in Obligations">
oblig object contains property of chargeOptionId connected to another array ChargeOptions.
Inside the table there is a select element that I want to show details of charge option of oblig.
html code:
<select class="form-control full-width" ng-model="oblig.ChargeOptionId">
<option ng-selected="ch.Id == oblig.ChargeOptionId" value="ch.Id" ng-repeat="ch in ChargeOptions">{{ch.Account}}</option>
</select>
the select element display the charge option details as I want, but when I try saving oblig, oblig.ChargeOptionId="ch.Id" string in place of value of ch.Id.
I tried:
1) using ng-value, but the select did not display the data correctly.
2) ng-options, but still data was not displayed correctly.
how can I fix that problem?
Change
value="ch.Id"
to
value="{{ch.Id}}"
or
ng-value="ch.Id"
The attribute "value" is not an angular directive (like ng-model and ng-value are) so it doesn't know you intend "ch.Id" as a variable.
jsbin
I'm not sure what was failing before, but this seems to work: I used ng-options instead of ng-repeat.
This seemed to do the trick:
angular.module('app', []).controller('Ctrl', function($scope) {
$scope.Obligations = [
{ ChargeOptionId: 1 },
{ ChargeOptionId: 2 },
{ ChargeOptionId: 3 },
{ ChargeOptionId: 4 },
{ ChargeOptionId: 5 },
{ ChargeOptionId: 6 },
{ ChargeOptionId: 7 }
];
$scope.ChargeOptions = [
{ Id: 1, Account: 'Account 1' },
{ Id: 2, Account: 'Account 2' },
{ Id: 3, Account: 'Account 3' },
{ Id: 4, Account: 'Account 4' },
{ Id: 5, Account: 'Account 5' },
{ Id: 6, Account: 'Account 6' },
{ Id: 7, Account: 'Account 7' }
];
$scope.alertSelected = function(idx) {
alert($scope.Obligations[idx].ChargeOptionId);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
<div ng-repeat="oblig in Obligations">
<div>
ChargeOption.Id = {{ChargeOptions[$index].Id}} /
Obligation.ChargeOptionId = {{oblig.ChargeOptionId}}
</div>
<select class="form-control full-width"
ng-model="oblig.ChargeOptionId"
ng-options="ch.Id as ch.Account for ch in ChargeOptions">
</select>
<button ng-click="alertSelected($index)">Selected value?</button>
<br /><br />
</div>
</div>