i made a Select with dynamic values using ngModel directive and the Bootstrap Framework, it works. My problem is that i want to add a placeholder, but the ng directive seems to ruining it.
Here is what i have:
<select [(ngModel)]="usuario.pais" name="s" class="form-control">
<option value="">Select a Country</option><!--My PlaceHolder-->
<option *ngFor="let pais of paises" value="pais.codigo">{{pais.nombre}}</option>
</select>
Any suggestions?
Maybe try this:
In TS:
public usuario = {pais: ''};
public paises = [{nombre: 'la France', codigo: 'fr'}, {nombre: 'deutscheland', codigo: 'de'}];
in HTML:
<select [(ngModel)]="usuario.pais" name="s" class="form-control">
<option value="">Select a Country</option>
<option *ngFor="let pais of paises" [value]="pais.codigo">
{{pais.nombre}}
</option>
</select>
Related
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>
I have the following code:
component.html:
<select id="select" (change)="updateValue(this.value)">
<option *ngFor="let option of filteredOptions" value="{{option .Id}}"></option>
</select>
component.ts:
updateValue(value: number){
this.value= value;
}
I can get the value of the select using jQuery or vanilla JS by selecting by ID.
Question
How can I pass in the value of the select using Angular?
For two-way binding, the [(ngModel)]="value" binding is missing. Try the following:
<select id="select" [(ngModel)]="selectedvalue">
<option *ngFor="let option of filteredOptions" value="{{option .Id}}"></option>
</select>
Now you can use the "selectedvalue" in your component.
For one-way binding, use $event.value. Try the following:
<select id="select" (change)="updateValue($event.value)">
<option *ngFor="let option of filteredOptions" value="{{option .Id}}"></option>
</select>
Demo: https://plnkr.co/edit/zxiDsiMg9GFA6nRxr5ly?p=preview
I solved it
<select id="select" (change)="updateValue($event.target.value)">
<option *ngFor="let option of filteredOptions" value="{{option .Id}}" class="select-option"></option>
</select>
I am trying to have a select drop down display the first option as a placeholder value
The following code works
<form (ngSubmit)="citySubmit(f)" #f="ngForm">
<select>
<option value="" disabled selected>Select Your City</option>
<option *ngFor="let c of cities" [value]="c">{{c}}</option>
</select>
</form>
however the following code does not
<form (ngSubmit)="citySubmit(f)" #f="ngForm">
<select
[ngModel]="city">
<option value="" disabled selected>Select Your City</option>
<option *ngFor="let c of cities" [value]="c">{{c}}</option>
</select>
</form>
which leads me to believe I am using the ngmodel incorrectly.
Can I have some guidance please.
It should be,
Change
From
<select [ngModel]="city">
To
<select [(ngModel)]="city">
Hi My current scenario is this: I want a default value too that should select.. Even if select is selected then also acceptable.. but it is blank at first..My code is this
<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
</select>
I'ave used this code too but not working :(
<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
<option selected="selected">Select</option>
</select>
Checkout my code please.
You can modify your code like this :
<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
<option value="">Select</option>
</select>
here is the plnkr : http://plnkr.co/edit/fekkRctRM59ydI6zDnpY?p=preview
or you can use ng-init like as mentioned by #zsong
<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-init="selectedItem='YourDefaultValue'" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
</select>
Or you can look at this
var myApp = angular.module('myApp', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<select id="myselection" ng-init="selectedColors=3" ng-model="selectedColors">
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<div>Selected Colors: {{selectedColors }}</div>
</div>
Code for to displays by default Select options
<select ng-model="your model" ng-options="your options">
<option selected="selected" value="">Select options</option>
</select>
Your ngModel is selectedItem, so you have to set selectedItem to the value which you want as default in your controller:
//This sets the default value to the first item in your list
$scope.selectedItem = $scope.task.dropdownvalues[0].value
You should not have an option tag if using an ng-option
utilize ng-model instead as below.
<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
in your controller
$scope.selectedItem = dropdown_values[0];
will resolve your issue.
Many times I have spend hours to find out the solution, believe me!
[ 1 ] Select Option with Numbers (Used in Pagination, Page Size Selection)
<select id="select_pagination_pages" ng-model="recordsInPage">
<option value="10" selected>10</option>
<option value="15">15</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="75">75</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="250">250</option>
</select>
Inside Controller, particular page init function, I have inserted 10 as String.
$scope.recordsInPage = "10".toString();
[ 2 ] Second Select Option is with simple yes or no selection.
<select class="rfc_text" id="select_flag" ng-model="rfc.flag">
<option value="yes" selected>YES</option>
<option value="no">NO</option>
</select>
Inside Controller initialized rfc.flag like -
$scope.rfc.flag = "yes";
[ 3 ] This third one Select Option is special and with tiny scenario, where model will only use last four option values, but the first one is selected by default.
<select id="select_timezone" ng-model="timezone_search">
<option value="" selected>Search Entire</option>
<option value="CountryCode">Country Code</option>
<option value="CountryName">Country Name</option>
<option value="TimeZone">Time Zone</option>
<option value="TimeOffset">Time Offset</option>
</select>
Inside page controller init -
$scope.timezone_search = "";
I think three examples would be enough for peoples. :D