How to set the value property in AngularJS - html

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.

Related

Unable to display out the text on input

Why isn't the "label option" ((Please Select One)) shown? This is a snippet from an Angular 2 project.
<select [(ngModel)]="selectUser" class="form-control">
<option value="" disabled selected>(Please Select One)</option>
<option value="USER">Assign Users</option>
<option value="TAGS">Tags</option>
</select>

Select field doesn't shows the default value in Angular

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>

show selected Drop down value in same page in angular4

I am working on Angular4 i want to show the selected dropdown value in the left side on the same page. i want the output like when selecting a packing type value and press add button the selected value can be moved to the right side portion.
actually, I am new in angular. can anyone help please its a big help form me
my Html Code is
<form #newForm="ngForm" (ngSubmit)="OnSubmit(newForm.value);newForm.reset()">
<div class="form-group">
<label>Packing Type</label>
<select class="form-control" >
<option value="0" disabled>Please Select Packing type</option>
<option *ngFor="let item of products" value={{item.ItemID}}>{{item.PackingtypeName}}</option>
</select>
</div>
for add button
<input type="button" value="Add Item" class="btn btn-success" (click)="addItems(newForm.value);newForm.reset()" />
</div>
this is my TS Component file
addItems(value: any) {
this.items = new IComboDetails(value.itemcode, value.itemdescription, value.PackingtypeName, value.quantity);
this.stockitems.push(this.items);
}

Here is working example
<select [(ngModel)]="myDropDown" (ngModelChange)="onChangeofmyOptions($event)">
<option value="one">One my value</option>
<option value="two">Two my value</option>
<option value="three">Three my value</option>
</select>
<input [hidden]="myDropDown !=='two'"type="text">
.ts
onChangeofOmyptions(newGov) {
console.log(newGov);
}
in your case
<select class="form-control" (ngModelChange)="onChangeofmyOptions($event)" >
<option value="0" disabled>Please Select Packing type</option>
<option *ngFor="let item of products" value={{item.ItemID}}>{{item.PackingtypeName}}</option>
</select>
onChangeofOptions(newGov) {
console.log(newGov);
this.myDropDown=newGov;
}
get value to right side
<input type="text" value={{myDropDown}}>
for binding
this.myDropDown=newGov;

placeholder value for select not showing when using ngmodel

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">

AngularJS: Select option is not selected by default

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