The default option ('Choose Default Meta Data') is not rendering but selected as view, anyone can help?
<div class="input-field col s12">
<select id="custom-select-f" v-model="meta_id" class="browser-default">
<option value="" disabled :selected="meta_id ? false : true">Choose Default Meta Data</option>
<option value="">Set As None</option>
<option v-for="meta in metas" :value="meta.id">{{meta.data}}</option>
</select>
<label for="custom-select-f" class="active">Meta Data</label>
</div>
Instead of binding to the selected attribute, I gave the option a 'fake' value:
https://jsfiddle.net/DarkFruits/5mk2hrfn/
<select name="" id="select" v-model='name'>
<option value="none" disabled >None</option>
<option value="max" >Max</option>
<option value="alex" >alex</option>
<option v-for='n in names' :value="n">{{n}}</option>
</select>
new Vue({
el: '#select',
data() {
return {
names: ['Sandy', 'Pete'],
name: 'none',
}
}
})
Related
I add a "Placeholder" to a an existing select. When I select any option and then pick the blank item , the placeholder is not shown anymore. How to always show it whenever no option is selected?
var l = $("#my_select");
if (l.val() === '') {
l.append($('<option>', { value: 1, text: 'Some Placeholder', disabled : true, selected: true, hidden: true }))
}
You merged disabled and hidden together. Therefor the placeholder is in the list of options not selectable and not visible. If you just want it to be visible omit hidden. If you also want to reselect the placeholder omit both.
<select id="selected">
<option value="" selected>placeholder</option>
<option value="1">troet</option>
<option value="2">quak</option>
</select>
<label for="selected">selected</label>
<br>
<select id="disabled">
<option value="" selected disabled>placeholder</option>
<option value="1">troet</option>
<option value="2">quak</option>
</select>
<label for="disabled">disabled</label>
<br>
<select id="hidden">
<option value="" selected hidden>placeholder</option>
<option value="1">troet</option>
<option value="2">quak</option>
</select>
<label for="hidden">hidden</label>
The selectField in my typescript doesn't shows the default value, when I run the server. I need "select" (the default value) whenever I run the server.
In my code the line "option value="none" selected " doesn't work.
<div class="form-group">
<label class="label label-default" for="tour-type">Tournament Type</label>
<select class="form-control" name="TournamentType" [(ngModel)]="tourDetails.TournamentType">
<option value="none" selected>Select</option>
<option value="PSA">PSA</option>
<option value="NationalCircuit">National Circuit</option>
<option value="StateClosed">State Closed</option>
<option value="Asian&World">Asian & World</option>
<option value="International">International</option>
<option value="NonRanking">Non-Ranking</option>
</select>
</div>
Set tourDetails.TournamentType to none in ngOnInit()
ngOnInit()
this.tourDetails.TournamentType ="none"
}
tourDetails.TournamentType needs to be equal to "none" so that it gets selected automatically.
otherwise you can do the following
<option value="" selected>Select</option>
I was having some problem when trying to set the default selected value for dropdown using Angular typescript. Here is my code in html:
<div class="row">
<div class="form-group col-md-2">
<strong><label class="form-control-label"
jhiTranslate="staff.department"
for="field_department">Department</label></strong>
</div>
<div class="form-group col-md-4">
<select class="form-control" id="field_department"
name="department" [(ngModel)]="staff.department">
<option [ngValue]="null" selected disabled>
Please select an Option</option>
<option [ngValue]="departmentOption.id === staff.department?.id ?
staff.department : departmentOption"
*ngFor="let departmentOption of departments | orderBy: 'departmentName'">
{{departmentOption.departmentName}}</option>
</select>
</div>
</div>
When I launch the page, by default, the dropdown option for "Please select an Option" supposed to show in the dropdown, however, in my case, it is empty. Any idea why is it so?
Thanks!
You can try setting staff.department=null initially
in ts
ngOnInit() {
this.staff.department=null
}
in html
<select class="form-control" id="field_department" name="department" [(ngModel)]="staff.department">
<option [ngValue]=null disabled>Please select an Option</option>
//rest code
</select>
try <option [ngValue]="undefined" selected disabled>Please select an Option</option>
Try giving "anyvariable that is not defined in typescript" as default value to option
<select class="form-control" id="field_department" name="department"
[(ngModel)]="staff.department">
<option [ngValue]="anythingNotDefinedYet" selected disabled>
Please select an Option</option>
<option [ngValue]="departmentOption.id ===
staff.department?.id ? staff.department : departmentOption"
*ngFor="let departmentOption of departments | orderBy: 'departmentName'">
{{departmentOption.departmentName}}</option>
</select>
Stackblitz Demo showing the case
I have a model Questionaire which has name property.
app.component.ts
import {Questionaire} from '../questionaire.model';
questionaire : Questionaire;
Based on the name property of class Questionaire in my html code I need to display different option value of the select element using *ngIf this is
what I am trying to do in app.component.html
<select
class="form-control"
name="proposal"
required
ngModel
>
<div *ngIf = "questionaire.name === 'credit'">
<option value="">Select</option>
<option value="Proposal">Proposal</option>
<option value="ndg">NDG</option>
<option value="credit">Credit Line</option>
</div>
<div *ngIf = "questionaire.name === 'asset'">
<option value="">Select</option>
<option value="Proposal">Proposal</option>
<option value="asset">Asset</option>
</div>
</select>
I am not able to achieve what I am trying to do.
I hope I am clear.
You should really move your data logic inside the typescript part of your component. Your template should only contain presentation logic
public interface Kvp {
value: string;
label: string;
}
export class AppComponent implements OnInit {
questionaire : Questionaire;
options: Kvp[];
ngOnInit(): void {
if (this.questionnaire.name === 'credit') {
this.options = [
{value: 'Proposal', label: 'Proposal'},
{value: 'ndg', label: 'NDG'}
];
// You can do the rest ;-)
}
}
}
Then, inside your template, simply iterate through "options"
<select class="form-control"
name="proposal"
required
ngModel>
<option value="">Select</option>
<option *ngFor="let item from options" value="{{item.label}}">{{item.value}}</option>
</select>
note: You really shouldn't have any business logic inside your AppComponent. This component should only contain sub-components.
Instead of using *ngIf on a div i used it on a ng-container and it worked for me.
Here is the piece of code:
<select
class="form-control"
name="proposal"
required
ngModel
>
<option value="">Select</option>
<option value="Proposal">Proposal</option>
<ng-container *ngIf = "questionaire.name === 'credit'">
<option value="ndg">NDG</option>
<option value="credit">Credit Line</option>
</ng-container>
<ng-container *ngIf = "questionaire.name === 'asset'">
<option value="asset">Asset</option>
</ng-container>
</select>
I hope it may help.
Use ng-template instead of Div like this:
<select class="form-control" name="proposal" required ngModel *ngIf="questionaire.name === 'credit' else asset ">
<option value="">Select</option>
<option value="Proposal">Proposal</option>
<option value="ndg">NDG</option>
<option value="credit">Credit Line</option>
</select>
<ng-template #asset>
<option value="">Select</option>
<option value="Proposal">Proposal</option>
<option value="asset">Asset</option>
</ng-template>
Html Code
<select class="form-control" id="txtcity" data-ng-model="Register.city" ng-options="item for item in dtcmbCity">
<option value="">Please Select</option>
</select>
<button type="button" ng-click="btnSet();">Set Item</button>
Js Code
$scope.Register = {city: ''};
$scope.dtcmbCity = ['Delhi','Bombay','Chennai'];
$scope.btnSet= function () {
$scope.Register.city = "Delhi"
}
My problem is when load the form the data (delhi,bombay,chennai) displayed in the select box. and then i click the set button i want to set delhi into the selection box.
thanks please help
if you are looking for setting the value attribute in the options fields same as the text value than this can help you.
Your current code .
ng-options="item for item in dtcmbCity"
Result HTML.
<select class="form-control ng-pristine ng-valid ng-touched" id="txtcity" data-ng-model="Register.city" ng-options="item for item in dtcmbCity">
<option value="" class="" selected="selected">Please Select</option>
<option label="Delhi" value="string:Delhi">Delhi</option>
<option label="Bombay" value="string:Bombay">Bombay</option>
<option label="Chennai" value="string:Chennai">Chennai</option>
</select>
if you use the track by in ng-options , html code is
ng-options="item for item in dtcmbCity track by item"
Result HTML.
<select class="form-control ng-pristine ng-valid ng-touched" id="txtcity" data-ng-model="Register.city" ng-options="item for item in dtcmbCity track by item">
<option value="" class="" selected="selected">Please Select</option>
<option label="Delhi" value="Delhi">Delhi</option>
<option label="Bombay" value="Bombay">Bombay</option>
<option label="Chennai" value="Chennai">Chennai</option>
</select>
Setting the value on button click is working fine.