I would like to have multiple selections without multiple.vue librabry. I want to write it by my own. I have data like this in js:
data:
roles : [here data]
form.roles: []
And my html with Vue:
<select class="form-control required-select2" v-model="form.roles" id="roles" required>
<option v-for="role in roles" v-bind:value="role.id" v-bind:selected="form.roles.indexOf(role.id) > -1">
{{ role.display_name }}
</option>
</select>
How can I have in form.roles more than one role.id? I have to write maybe a method for this?
Do you want to do something like https://codepen.io/ittus/pen/vjdLvb
You need to add multiselect options to your select
<template>
<select class="form-control required-select2" v-model="form.roles" id="roles" multiple required>
<option v-for="role in roles" v-bind:value="role.id" v-bind:selected="form.roles.indexOf(role.id) > -1">
{{ role.display_name }}
</option>
</select>
<div>Selected: {{ form.roles }}</div>
Related
I'm developing a doctor's appointment laravel project. the condition is if a user fixes an appointment they can't able to fix the appointment for the same doctor at the same date and time. I tried with firstOrCreate method but doesn't match my condition. here are my conditions
1.if doctors_id AND date AND time already exist then shouldn't insert the data
2.if doctors_id OR date OR time, any three of this already exist then can insert the data
3.if all fields already not exist then insert data
here are the code snippets
In view
<div class="card-body">
<form action="appointment" method="post">
{{ #csrf_field() }}
<select name="doctors" id="" class="form-control">
#foreach ($docList as $item)
<option value="{{$item->id}}">{{$item->name}}</option>
#endforeach
</select><br><br>
<input type="date" name="date" id="" class="form-control">
<br><br>
<select name="time" class="form-control">
<option value="9-10AM">9-10AM</option>
<option value="10-11AM">10-11AM</option>
<option value="1-2PM">1-2PM</option>
<option value="2-3PM">2-3PM</option>
<option value="3-4PM">3-4PM</option>
</select>
<button type="submit" class="btn btn-primary">Fix Appointment</button>
</form>
</div>
In controller
public function store(Request $request)
{
$uId = Auth::id();
$fixAppointment = Appointment::firstOrNew(['doctors_id'=>$request->doctors,'date'=>request('date')],['time'=>request('time')]);
$fixAppointment->users_id = $uId;
$fixAppointment->save();
}
Here I sorted out the issue by using where condition
In controller
$appointment = Appointment::where('date', '=', request('date'))->where('time','=',request('time'))->where('doctors_id','=',request('doctors'))->first();
if ($appointment === null)
{
$fixAppointment = New Appointment;
$fixAppointment->doctors_id = $request->doctors;
$fixAppointment->users_id = $uId;
$fixAppointment->date = $request->date;
$fixAppointment->time=$request->time;
$fixAppointment->save();
}
here is the link which I referred to find this solution.
I'm using Bootswatch Sandstone https://bootswatch.com/sandstone/
And I have a form with source code:
<div class="form-group">
<label for="exampleSelect2">Example multiple select</label>
<select multiple="" class="form-control" id="exampleSelect2">
<option><p class="text-left">Subject 1<p><p class="text-right">500 views</p></option>
<option><p class="text-left">Subject 2<p><p class="text-right">400 views</p></option>
</select>
</div>
How to left and right align text values within the options?
To the best of my knowledge, it is not possible to have different formatting within an option tag. One option you could use is have information appear as a tooltip using the title attribute like so:
<div class="form-group">
<label for="exampleSelect2">Example multiple select</label>
<select multiple="" class ="form-control" id="exampleSelect2">
<option title="500 views">Subject 1</option>
<option title="400 views">Subject 2</option>
</select>
</div>
I use reactive forms within my app. In a certain form I want to display a required (Validators.required) select like this:
<select class="form-control"
[id]="dformControl.key"
[formControlName]="dformControl.key"
[multiple]="dformControl.multiple">
<option *ngIf="!dformControl.value"
value="undefined">
Choose ...
</option>
<option *ngFor="let opt of dformControl.options"
[value]="opt.value"
[selected]="dformControl.value == opt.value">
{{opt.label}}
</option>
</select>
The problem is whether I use value="undefined" or value="" the form control still is set to valid because it got a value. Do not present the value attribute results in value="Choose ...".
Am I using select with reactive forms in a false way or how would I be able to make the option "Choose ..." being not valid??
Assigning initial value of select control to null will do the trick. Try below,
model_property = null
....
this.fb.group({
....
'control_key' : [this.model_property, Validators.required]
...
})
Check this Plunker!!, Look into app/reactive/hero-form-reactive.component.ts file.
I updated the Plunker to include below and it seems to be working,
<select id="power" class="form-control"
formControlName="power" required >
// see the value is set to empty,
<option value="">Choose...</option>
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
</select>
Hope this helps!!
What I do is add a blank option and when that is selected since there is no value it is not valid.
<select class="form-control"
[id]="dformControl.key"
[formControlName]="dformControl.key"
[multiple]="dformControl.multiple">
<option></option>
<option *ngFor="let opt of dformControl.options"
[value]="opt.value"
[selected]="dformControl.value == opt.value">
{{opt.label}}
</option>
</select>
I am trying to use the 'track by' expression to track my selections by value, in an array of objects but, I'm unable to get it to work.
JS
var app = angular.module('cwsystem', []).controller('RegistrationCtrl', ['$scope', function($scope){
$scope.roles = [
{value: '110', position: 'Security Chief'},
{value: '111', position: 'Security Officer'}
];
}]);
HTML
<select name="userStatus" ng-model="user.userStatus" ng-options=" role.value as role.position for role in roles track by role.position" class="form-control input-sm" required>
<option value="">--Select Status--</option>
</select>
I want the browser to render the results like this:
<select name="userStatus" ng-model="user.userStatus" ng-options=" role.value as role.position for role in roles track by role.position" class="form-control input-sm" required>
<option value="">--Select Status--</option>
<option value="110">Security Chief</option>
<option value="111">Security Officer</option>
</select>
Can I get some assistance please on this problem?
ng-options does not accept "role.value as role.position for role in roles track by role.position" expression.
<select name="userStatus" ng-model="user.userStatus" ng-options=" role.value as role.position for role in roles" class="form-control input-sm" required>
<option value="">--Select Status--</option>
</select>
if you use above expression in ng-option you will get selected value in ng-model variable
I want to use a dropdown list in my view in laravel. In my controller I have the following.
$awards = array(
'gold' => 'gold',
'silver' => 'silver',
'bronze' => 'bronze',
'no-award' => 'No Award'
);
$entry->awards = $awards;
I pass it to the view as follows
$this->layout = View::make('entries/edit', array('entry' => $entry));
Finally in the view
<div class="form-group">
{{ Form::label('awards', 'Award:', array('class' => 'control-label '))}}
{{ Form::select('awards', array(entry->$awards))}}
</div>
The issue Im running into is in the source it looks like this...
<div class="form-group">
<label for="awards" class="control-label ">Award:</label>
<select id="awards" name="awards">
<optgroup label="0">
<option value="gold">gold</option>
<option value="silver">silver</option>
<option value="bronze">bronze</option>
<option value="no-award">No Award</option>
</optgroup>
</select>
</div>
Which looks good except I don't know how to avoid having it put in an optgroup, and I'd like to keep the array to my controller. Thanks.
You are wrapping your awards inside an extra unnecessary array - creating the optgroup[0]
Change
{{ Form::select('awards', array(entry->$awards)) }}
to
{{ Form::select('awards', entry->$awards) }}