In the documentation explains that you have to create a md-autocomplete like that:
<md-form-field>
<input type="text" mdInput [formControl]="myControl" [mdAutocomplete]="auto">
</md-form-field>
<md-autocomplete #auto="mdAutocomplete">
<md-option *ngFor="let option of options" [value]="option">
{{ option }}
</md-option>
</md-autocomplete>
Is there is any way to generate the #auto on runtime? Thanks in advance.
Your best bet is to wrap it in an *ngFor like this so that your template variable's scope is limited to only that for loop iteration,
<ng-container *ngFor="let autocomplete of autocompletes">
<!-- Input -->
<md-form-field>
<input type="text"
mdInput
[formControl]="autocomplete.control"
[placeholder]="autocomplete.placeholder"
[mdAutocomplete]="auto">
</md-form-field>
<!-- Autocomplete -->
<md-autocomplete #auto="mdAutocomplete">
<md-option *ngFor="let option of autocomplete.options" [value]="option">
{{ option }}
</md-option>
</md-autocomplete>
</ng-container>
autocompletes = [
{ placeholder: 'Sample 1', options: [1, 2, 3], control: new FormControl() },
{ placeholder: 'Sample 2', options: [3, 4, 5], control: new FormControl() },
{ placeholder: 'Sample 3', options: [6, 7, 8], control: new FormControl() },
];
See this EXAMPLE.
Related
Hi Guys hope someone can help, I am working on the test project using Laravel for backend and vue, vuetify for the front end.
I have this store table
and I want to display on v-calendar based on the date from the store table
any idea how to make this work?, maybe you have some reference or link you can share.
[edit]
I got this code from https://vuetifyjs.com/en/components/calendars/#usage but am still lost, hope someone can explain and point out what I should do.
thanks
<script>
export default {
data: () => ({
type: 'month',
types: ['month', 'week', 'day', '4day'],
mode: 'stack',
modes: ['stack', 'column'],
weekday: [0, 1, 2, 3, 4, 5, 6],
weekdays: [
{ text: 'Sun - Sat', value: [0, 1, 2, 3, 4, 5, 6] },
{ text: 'Mon - Sun', value: [1, 2, 3, 4, 5, 6, 0] },
{ text: 'Mon - Fri', value: [1, 2, 3, 4, 5] },
{ text: 'Mon, Wed, Fri', value: [1, 3, 5] },
],
value: '',
events: [],
colors: ['blue', 'indigo', 'deep-purple', 'cyan', 'green', 'orange', 'grey darken-1'],
names: ['Meeting', 'Holiday', 'PTO', 'Travel', 'Event', 'Birthday', 'Conference', 'Party'],
}),
methods: {
getEvents ({ start, end }) {
const events = []
const min = new Date(`${start.date}T00:00:00`)
const max = new Date(`${end.date}T23:59:59`)
const days = (max.getTime() - min.getTime()) / 86400000
const eventCount = this.rnd(days, days + 20)
for (let i = 0; i < eventCount; i++) {
const allDay = this.rnd(0, 3) === 0
const firstTimestamp = this.rnd(min.getTime(), max.getTime())
const first = new Date(firstTimestamp - (firstTimestamp % 900000))
const secondTimestamp = this.rnd(2, allDay ? 288 : 8) * 900000
const second = new Date(first.getTime() + secondTimestamp)
events.push({
name: this.names[this.rnd(0, this.names.length - 1)],
start: first,
end: second,
color: this.colors[this.rnd(0, this.colors.length - 1)],
timed: !allDay,
})
}
this.events = events
},
getEventColor (event) {
return event.color
},
rnd (a, b) {
return Math.floor((b - a + 1) * Math.random()) + a
},
},
}
</script>
<template>
<div>
<v-sheet
tile
height="54"
class="d-flex"
>
<v-btn
icon
class="ma-2"
#click="$refs.calendar.prev()"
>
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
<v-select
v-model="type"
:items="types"
dense
outlined
hide-details
class="ma-2"
label="type"
></v-select>
<v-select
v-model="mode"
:items="modes"
dense
outlined
hide-details
label="event-overlap-mode"
class="ma-2"
></v-select>
<v-select
v-model="weekday"
:items="weekdays"
dense
outlined
hide-details
label="weekdays"
class="ma-2"
></v-select>
<v-spacer></v-spacer>
<v-btn
icon
class="ma-2"
#click="$refs.calendar.next()"
>
<v-icon>mdi-chevron-right</v-icon>
</v-btn>
</v-sheet>
<v-sheet height="600">
<v-calendar
ref="calendar"
v-model="value"
:weekdays="weekday"
:type="type"
:events="events"
:event-overlap-mode="mode"
:event-overlap-threshold="30"
:event-color="getEventColor"
#change="getEvents"
></v-calendar>
</v-sheet>
</div>
</template>
Actually you need to pass data through events prop of v-calendar
You can see how to pass data in vuetify docs code.
They are sharing examples.
One of examples here
I have the following code which should loop over an array to populate an HTML select element but getting zero data?
<div class="w-full" x-data="{classes: [
{
room: 'online',
id: 1,
},
{
room: 'in class',
id: 2,
}
]}">
<select name="" id="">
<template x-for="class in classes" :key="class.id">
<option x-text="class.room" :value="class.room"></option>
</template>
</select>
</div>
Please check this. I renamed class to cls (may be class word is conflicting though did not see any error in concole)
https://codepen.io/rajdeepdebnath/pen/MWyNoKj?editors=1010
<div class="w-full" x-data="{classes: [
{
room: 'online',
id: 1,
},
{
room: 'in class',
id: 2,
}
]}">
<select name="" id="">
<template x-for="cls in classes" :key="cls.id">
<option x-text="cls.room" :value="cls.room"></option>
</template>
</select>
</div>
I am trying to use jquery validate to validate the form and I want the user to select atleast 1 checkbox. The reason for having different names is that they match with the database field names.
....
<input class="myclass" type="checkbox" name="option_1">Option 1<br>
<input class="myclass" type="checkbox" name="option_2">Option 2<br>
<input class="myclass" type="checkbox" name="option_3">Option 3<br>
<input class="myclass" type="checkbox" name="option_4">Option 4<br>
<input class="myclass" type="checkbox" name="option_5">Option 5<br>
....
Here is my jQuery code used for validation:
jQuery.validator.addMethod("require_from_group", function(value, element, options) {
var valid = $(options[1], element.form).filter(function() {
return $(this).val();
}).length >= options[0];
if(!$(element).data('reval')) {
var fields = $(options[1], element.form);
fields.data('reval', true).valid();
fields.data('reval', false);
}
return valid;
}, jQuery.format("Please fill out at least {0} of these fields."));
$("#formname").validate({
submitHandler: function(form){
console.log("Came here");
return false;
},
rules:{
option_1:{ require_from_group: [1, '.myclass']},
option_2:{ require_from_group: [1, '.myclass']},
option_3:{ require_from_group: [1, '.myclass']},
option_4:{ require_from_group: [1, '.myclass']},
option_5:{ require_from_group: [1, '.myclass']}
}
});
This code is not working. Where am I going wrong ?
Don't see anything wrong inside your .validate() code or in your HTML markup. But I did not check your require_from_group method because you did not need to write this from scratch.
AFAIK, The latest version of the plugin (1.11.1) fixed the bugs in this method. You only have to include the additional-methods.js file and it should work as expected.
Have a look at the sample here.
The problem I have is that I need to have 0.00 value remain in the numerictextbox even though the value is deleted in the control. At the moment it appears as empty on the UI. Can anyone advise the cleanest solutions for problem?
You can achieve your goal wiring the change event of the widget and modify its value and the model's one when it is triggered.
<div id="view">
<div data-template="containertpl" data-bind="source: People"></div>
<button data-bind="click: AddNew">Add</button>
</div>
<script id="containertpl" type="text/x-kendo-template">
<div>
<label for="FirstName#:id#">Name</label>
<input name="FirstName#:id#" type="text" data-bind="value: FirstName"/>
<input data-role="numerictextbox" data-bind="value: Income, events: { change: numericChange }"/>
</div>
</script>
var viewModel = kendo.observable({
People: [
{id: 1, FirstName: "", Income: "0.00" },
{id: 2, FirstName: "", Income: "0.00" },
{id: 3, FirstName: "", Income: "0.00" }
],
numericChange: function(args) {
var numeric = args.sender;
if (numeric.value() === null) {
numeric.value(0);
args.data.set("Income", 0);
}
}
});
viewModel.AddNew = function(){
viewModel.People.push({id: viewModel.People.length + 1, FirstName: "Generated", Income: "0.00"});
};
$(document).ready(function(){
kendo.bind($("#view"), viewModel);
});
I'm using Scriptaculous to create a price range slider with two handles says minimum and maximum values. How can I store minimum and maximum values in separate hidden field.
Current script as follows,
<div id="price-range" class="filter-track">
<span id="price-min" class="filter-handle" title="Scroll to set your minimum value">>></span>
<span id="price-max" class="filter-handle" title="Scroll to set your maximum value"><<</span>
</div>
<input type="hidden" name="price" id="beds" value="0,100"/>
var loadPriceSlider = function () {
var handles = [$('price-min'), $('price-max')];
// horizontal slider control with preset values
new Control.Slider(handles, 'price-range', {
range:$R(0, 5000, false),
sliderValue: [0, 3000],
values: [0, 100, 200, 300],
restricted: true,
onChange: function(v){
$('price').value = v;
}
});
};
It will store comma separated (min,max) values in price field. but i would like to store this in separate field. How to do this? Any help please?
Your code tries to refer to $('price') but you the input with the name 'price' has the 'id' of 'beds'.
Here's corrected HTML which has the price field, and an additional field:
<div id="price-range" class="filter-track">
<span id="price-min" class="filter-handle"
title="Scroll to set your minimum value">>></span>
<span id="price-max" class="filter-handle"
title="Scroll to set your maximum value"><<</span>
</div>
<ul>
<li>price: <input type="text" name="price" id="price" value="0,100"/></li>
<li>myRange <input type="text" name="myRange" id="myRange" value="0,100"/></li>
</ul>
And the JavaScript:
var handles = [$('price-min'), $('price-max')];
// horizontal slider control with preset values
new Control.Slider(handles, 'price-range', {
range: $R(0, 5000, false),
sliderValue: [0, 3000],
values: [0, 100, 200, 300],
restricted: true,
onChange: function(val){
$('price').value = val;
$('myRange').value = val;
}
});
This works, loading these JavaScript:
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js?load=slider"></script>