I have the following combobox in Vuetify:
<v-combobox v-model="supplier.supplier_type" maxlength="255" :items="company.supplier_types" item-text="name" item-value="id" :label="$t('supplier.supplier_types')" :hide-no-data="true" outlined :error-messages="errors" :return-object="false">
</v-combobox>
However, although the item-text is being displayed correctly in the item slot, it displays the id instead in the selection slot:
Am I suppoused to change anything on the combobox?
I tried specificying the item-text by using the slot, but that didn't work out:
<v-combobox v-model="supplier.supplier_type" maxlength="255" :items="company.supplier_types" item-text="name" item-value="id" :label="$t('supplier.supplier_types')" :hide-no-data="true" outlined :error-messages="errors" :return-object="false">
<template v-slot:selection="{ item, index }">
{{item.name}}
</template>
<template v-slot:item="{ on, item }">
<v-list-item v-on="on">
{{item.name}}
</v-list-item>
</template>
</v-combobox>
There is currently a bug regarding item-value, if return-object is set to false.
Quote from the Report: "When the return-object prop is set to false on a v-combobox, the text-field 'item-text' apparently gets changed to the id of the item-value."
It is mentioned in the documentation of v-combobox.
Removing item-value="id" should fix it, but results in the whole object being the value.
Related
How to set many dropdown fields using array in Angular. Also, when choose an option from one dropdown field will not another field and the selected option to be shown on it's input box.
I tried a lot to achieve it, but not luck. I have also attached the code. Please review it & fix it if you have better understanding.
https://stackblitz.com/edit/angular-qfpxmy?file=src%2Fapp%2Fapp.component.ts
you has errors in your code, the idea is show/change filter.formField[ind]. So you should use [ngModel]="filter.formFiend[ind] instead [(ngModel)]="filter.formField" (it's innecesary use the "bannana notation" or (NgModelChange) because you change the value when click the options.
<div class="row" *ngFor="let item of dropdownsArr; let ind = index;">
...
<!--the [(NgModel)]="filter.formField" becomes like-->
<input ...[ngModel]="filter.formField[ind]"
(click)="dropdownFieldStatus(ind, $event)">
<ul class="dropdown filter-priority open" *ngIf="showDropDown[ind]">
...
</ul>
</div>
Futhermore, your function onSelectOption should give value to this.filter.formField[ind]
onSelectOption(ind: number, index: number, bugClass: any): void {
this.selectedOptionIndex[ind] = index;
this.filter.formField[ind] = bugClass.title;
}
Im comparing two object arrays and displaying them with those that have the same object checkbox checked. I now want to sort the list the with checkbox check to be first as a default state.
I also want to sort by clicking the header to sort by ascending order .
<div>header</div>
<div class="search" ng-repeat="items in products ">
<label >{{item.name}}</label>
<input type="checkbox" ng-model="item.checked"
ng-click="checked(item,productlist)"
ng-checked=" checked(item,productlist)">
</div>
I tried using orderBy:[‘-checked’,’item’]: true to sort the checked ones on top but its not working. Any ideas
A few problems here...
You have ng-repeat="items in products", but then you refer to item instead of items within this scope.
You have this checked() method that you're passing to ng-click and ng-checked. What exactly is this doing? You should never be using ng-checked in conjunction with ng-model - https://docs.angularjs.org/api/ng/directive/ngChecked
By passing '-checked' to orderBy, items will be ordered by their checked value in reverse, i.e. they will be ordered false first, true last. Then you're passing true as the reverse parameter to orderBy, so the list will be reversed again. You're reversing the ordering twice unnecessarily - https://docs.angularjs.org/api/ng/filter/orderBy
This might work better...
<div>header</div>
<div class="search" ng-repeat="item in products | orderBy: 'checked'">
<label>{{item.name}}</label>
<input type="checkbox" ng-model="item.checked">
</div>
Please see plunker here that demonstrates the issue:
I want to display the corresponding English value (first column) for any given row when any of the values are changed. So for example 'Uploaded' should always be displayed in the pop-up when any of the values on the second row are changed.
I have gotten this far in example, but not quite there:
<textarea ng-model="res.Value"
ng-change="vm.changed(vm.resourceGridResources.Resources[$index].Resources[0].Value)"
style="min-width: 300px"></textarea>
For your exemple.
Do not use $index but $parent.$index.
It will refers to the $index of the previous ng-repeat.
<textarea ng-model="res.Value"
ng-change="vm.changed(vm.resourceGridResources.Resources[$parent.$index].Resources[0].Value)"
style="min-width: 300px">
</textarea>
Corrected plunkr
the 1st (FIRST!!) item in a combo box simply goes blank.
the item is actually there, but gets invisible. it only gets visible when I click on it. when I click on any other item, the 1st item disappears (becomes blank) again.
the problem only happens to the 1st item in the combo box.
this is not the default initial blank item that is commonly seen in many combo box. it is a real item, with a real value, that becomes blank out of nothing inside the combo.
I'm not applying any sort of filter on the ng-options.
could someone help?
I finally managed to make the 1st item visible inside the combo-box. I tried many options and the one that worked was removing the
<div class='modal-body'> </div>
from the modal html and replacing it for
<form class='form'> </form>.
the main body of the modal is now inside the "form". I wonder why it worked.
I also have a question about the
$scope.form = {type : $scope.typeOptions[0].value};
thing. I want to use it in another situation, but the list is declare in the html, not in the javascript. I mean, there is no "$scope.typeOptions" or equivalent in my javascript. I have the following in my html
<div >
<select data-ng-disabled="v1.array2.length == 0 || v1.butt != '2'"
class="col7"
name="orderOptions"
id="orderOptId"
data-ng-click="v1....()"
data-ng-model="v1...." >
<option value="A">Ascending</option>
<option value="D">Descending</option>
</select>
</div>
In this case, how should I use it?
Thanks.
You can use ng-init="v1.... = 'A'" or ng-init="v1.... = 'D'" with your ng-model like following. thanks to ng-init, we can set initial option in select element.
<select ng-init="v1.... = 'D'"
data-ng-disabled="v1.array2.length == 0 || v1.butt != '2'"
class="col7"
name="orderOptions"
id="orderOptId"
data-ng-click="v1....()"
data-ng-model="v1...." >
<option value="A">Ascending</option>
<option value="D">Descending</option>
</select>
I'm trying to validate a form that is dynamically generated with JSON data, that is rendered to the page using ng-repeat. The data is questions with corresponding answers. The issue I'm running in to is that with a dynamic ng-model on each group, like so:
<div class="well question-well" ng-repeat="question in Posttest1Questions">
<p><strong>{{question.question}}</strong></p>
<ul>
<li ng-repeat="answers in question.answers">
<input type="radio" name="Q{{question.id}}" ng-model="question_[question.id]" id="{{question.id}}" value="{{answers.id}}" required data-key="{{answers.isCorrect}}">{{answers.answer}}
</li>
</ul>
</div>
Even when all the questions are answered, the form never turns valid. In turn, if I remove the ng-model attr, the form is always valid, even if no radio buttons has been selected.
Example Plunkr: http://plnkr.co/edit/DvcJ8byS0yF7iLp37Ets?p=preview
You can use ng-required to set a condition on the input's required status. In this case, if the model used with ng-model is null, then required. Otherwise, not required.
This way, once you've selected one of the answers (the model has a value), all of the answers for this question will not be marked as required.
<input type="radio" name="Q{{question.id}}" ng-model="question[question.id]" id="{{question.id}}" value="{{answers.id}}" ng-required="question[question.id] == null" data-key="{{answers.isCorrect}}" />
See it working here.
The underscore in
ng-model="question_[question.id]" seems wrong to me.
Please try ng-model="question[question.id]" then you can simply say required
updated your plnkr: http://plnkr.co/edit/gCZHFqd07880Os8FcxhG?p=preview