Angular: how to show default selected in dropdown - angularjs

I have below drop down. How can i show "C" as selected:
<select ng-model="sortData">
<option value='abc'>A</option>
<option value='xyz'>B</option>
<option value='prq'>C</option>
<option value='LMN'>D</option>
</select>


Just set default value in scope
$sope.sortData = "prq";
Or
<select ng-model="sortData">
<option value='abc'>A</option>
<option value='xyz'>B</option>
<option ng-selected="true" value='prq'>C</option>
<option value='LMN'>D</option>
</select>


here is one more way to do it:
<select ng-model="sortData" ng-init="sortData='prq'">
<option value='abc'>A</option>
<option value='xyz'>B</option>
<option value='prq'>C</option>
<option value='LMN'>D</option>
</select>


In controller define the $scope value
$scope.sortData = 'prq';


In order to show this as default value set
$scope.sortData = 'prq';


you can do like this it will work...
<select ng-model="sortData">
<option value='abc'>A</option>
<option value='xyz'>B</option>
<option value='prq' selected>C</option>
<option value='LMN'>D</option>
</select>

Related

Separate Dropdown for Day, Month and Year in Angular8

I need help to create custom Date Picker like the below image.
I am trying to do using formGroup But I am not much experience in angular.
<form [formGroup]="profileForm" (ngSubmit)="sendMessageForm1()">
<select id="day" formControlName="Day">
<option value="">Day</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>
<select id="month" formControlName="Month">
<option value="">Month</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>
<select id="year" formControlName="Year">
<option value="">Year</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
</select>
</form>
Help me out to complete this task.

based on selected option i want to display the Select fields using ionic and angular js

In a parent select option have Option-1,Option-2,Option-3 and also empty also be there. When ever selecting the any option i want to display the below child select fields like if select Option 2 i want display 2 selection fields below like that same, if select empty i don't want to show child selection tags.
This is the code but i don't want to show static way I need to display dynamically
function Controller ($scope) {
$scope.myDropDown = '';
}
<div ng-app ng-controller="Controller">
<select ng-model="myDropDown">
<option value="q"></option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<select ng-show="myDropDown=='one'" >
<option value="1"></option>
<option value="111">1</option>
<option value="1111">1111</option>
<option value="111">1111111</option>
</select>
<select ng-show="myDropDown=='two'" >
<option value="2"></option>
<option value="222">2</option>
<option value="2222">222</option>
<option value="222">22222</option>
</select>
<select ng-show="myDropDown=='two'" >
<option value="22"></option>
<option value="222222">22</option>
<option value="22222222">222222</option>
<option value="222222">2222222222</option>
</select>
<select ng-show="myDropDown=='three'" >
<option value="3"></option>
<option value="333">3</option>
<option value="3333">333</option>
<option value="333">33333</option>
</select>
<select ng-show="myDropDown=='three'" >
<option value="33"></option>
<option value="333333">33</option>
<option value="33333333">333333</option>
<option value="333333">3333333333</option>
</select>
<select ng-show="myDropDown=='three'" >
<option value="333"></option>
<option value="333333333">333</option>
<option value="333333333333">333333333</option>
<option value="333333333">333333333333333</option>
</select>
</div>

if I well understand your question, you want to select item from the select and then show 1,2 or 3 items in the ionic list, if that is what you want, here is an idea to do that:
<div class="well" ng-show="Lang1 == '1'">
<div class="form-group">
<select class="form-control" id="sel2" ng-model="Lang2" ng-change="changeMe()">
<option ng-option value="1">Language 1</option>
<option ng-option value="2">Language 2</option>
<option ng-option value="3">Language 3</option>
</select>
</div>
<ion-list>
<ion-checkbox ng-if="Lang2>=1">Read</ion-checkbox>
<ion-checkbox ng-if="Lang2>=2">Write</ion-checkbox>
<ion-checkbox ng-if="Lang2>=3">Speak</ion-checkbox>
</ion-list>
</div>
here is an example :
Edit
here is what you wantPS: this is just an example to inspire you, the real solution depends on your needs
Edit
what about this example

Recursive display select option in angularjs

I have a html select tag with option tags like below:
<select>
<option value="">Parent 1</option>
<option value=1>|--child 1</option>
<option value=2>|----child 1.1</option>
<option value=2>|----child 1.2</option>
<option value=1>|--child 2</option>
<option value="">Parent 2</option>
<option value=1>|--child 2</option>
<option value=2>|----child 2.1</option>
<option value="">Parent 3</option>
<option value=1>|--child 3</option>
<option value=2>|----child 3.1</option>
</select>
Could you please teach me how to implement this recursive in Angularjs 1 directive ?
And how can i get selected item when in Editable mode?
Thank you very much.
Khoa Truong Quoc Anh.

You can use <optgroup> with ng-select
<select ng-model='theModel' ng-change="display(theModel)">
<optgroup ng-repeat='group in collection' label="{{group.Name}}">
<option ng-repeat='veh in group.Fields' value='{{group.Name}}::{{veh.Name}}'>{{veh.Name}}</option>
</optgroup>
</select>
DEMO

Syntax:
ng-options="option.name as option.value group by option.type for option in options"
Click for demo

I can't select a default value from a select option

I have a problem in selecting the default value of the select option when I try to load the page,this is my code:
<select ng-model="sortKey" class="ng-valid ng-pristine">
<option value="LastName" selected="selected">Nom</option>
<option value="FirstName">Prenom</option>
<option value="Class">Classe</option>
</select>
I have used the selected="selected" attribute but always I have this problem
Thanks for help
this is a demo:
<select ng-model="sortKey" style="border-radius: 20px;width: 135px;height: 32px;margin-left: 0px;margin-right: 22px;" class="ng-valid ng-dirty ng-pristine">
<option selected value="LastName" >Nom</option>
<option value="FirstName">Prenom</option>
<option value="Class">Classe</option>
</select>

How can I create a simple <select> in AngularJS with an option pre-selected?

I am trying to create a in AngularJS. Here's what I did so far:
<select ng-model="inverse">
<option value=true>Sort Up</option>
<option value=false selected="selected">Sort Down</option>
</select>
I was trying to set false as the initial value. However when I look at the HTML that's created I see this and the select box does not show "Sort Down" as the default:
<select ng-model="inverse" class="ng-pristine ng-valid">
<option value="? undefined:undefined ?"></option>
<option value="true">Sort Up</option>
<option value="false" selected="selected">Sort Down</option>
</select>
Can someone explain what I am doing wrong.

This works for me:
<select ng-model="inverse">
<option value="true">Sort Up</option>
<option value="false">Sort Down</option>
</select>
Controller:
$scope.inverse = "false";
However, using ng-options is suggested.

Set the value of inverse in the controller using:
$scope.inverse = true;
And remove the selected="selected" attribute from the option.

<select ng-init="inverse='false'" ng-model="inverse">
<option value=true>Sort Up</option>
<option value=false>Sort Down</option>
</select>

Resources