I've looked online for a solution to this, but none of the solutions quite fits my need.
What I want is a control that contains a dropdown with values, which the user can choose to show and select a value from by pressing the typical arrow button in the field, and where typing something in the field also shows the dropdown and filters the values in it according the the input.
So in terms of angular-ui-bootstrap terminology, it's a input/select-element with typeahead.
For me this is how a normal dropdown field should work, but I can't find any implementation of this.
There are some implementations which shows the typehead popup when the field is focused, etc. But I feel that it would be weird for the user if the got a popup when they focus what appears to be a normal input field.
Is this possible?
You can use SELECT2 style. You can also select a value from by pressing the typical arrow button in the field, and where typing something in the field
$(document).ready(function() {
$('.js-example-basic-multiple').select2({
placeholder: 'Select an option'
});
});
select{
width :200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
<optgroup label="Alaskan/Hawaiian Time Zone" data-select2-id="171">
<option value="AK" data-select2-id="172">Alaska</option>
<option value="HI" data-select2-id="173">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone" data-select2-id="174">
<option value="CA" data-select2-id="175">California</option>
<option value="NV" data-select2-id="176">Nevada</option>
<option value="OR" data-select2-id="177">Oregon</option>
<option value="WA" data-select2-id="178">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone" data-select2-id="179">
<option value="AZ" data-select2-id="180">Arizona</option>
<option value="CO" data-select2-id="181">Colorado</option>
<option value="ID" data-select2-id="182">Idaho</option>
<option value="MT" data-select2-id="183">Montana</option>
<option value="NE" data-select2-id="184">Nebraska</option>
<option value="NM" data-select2-id="185">New Mexico</option>
<option value="ND" data-select2-id="186">North Dakota</option>
<option value="UT" data-select2-id="187">Utah</option>
<option value="WY" data-select2-id="188">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone" data-select2-id="189">
<option value="AL" data-select2-id="190">Alabama</option>
<option value="AR" data-select2-id="191">Arkansas</option>
<option value="IL" data-select2-id="192">Illinois</option>
<option value="IA" data-select2-id="193">Iowa</option>
<option value="KS" data-select2-id="194">Kansas</option>
<option value="KY" data-select2-id="195">Kentucky</option>
<option value="LA" data-select2-id="196">Louisiana</option>
<option value="MN" data-select2-id="197">Minnesota</option>
<option value="MS" data-select2-id="198">Mississippi</option>
<option value="MO" data-select2-id="199">Missouri</option>
<option value="OK" data-select2-id="200">Oklahoma</option>
<option value="SD" data-select2-id="201">South Dakota</option>
<option value="TX" data-select2-id="202">Texas</option>
<option value="TN" data-select2-id="203">Tennessee</option>
<option value="WI" data-select2-id="204">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone" data-select2-id="205">
<option value="CT" data-select2-id="206">Connecticut</option>
<option value="DE" data-select2-id="207">Delaware</option>
<option value="FL" data-select2-id="208">Florida</option>
<option value="GA" data-select2-id="209">Georgia</option>
<option value="IN" data-select2-id="210">Indiana</option>
<option value="ME" data-select2-id="211">Maine</option>
<option value="MD" data-select2-id="212">Maryland</option>
<option value="MA" data-select2-id="213">Massachusetts</option>
<option value="MI" data-select2-id="214">Michigan</option>
<option value="NH" data-select2-id="215">New Hampshire</option>
<option value="NJ" data-select2-id="216">New Jersey</option>
<option value="NY" data-select2-id="217">New York</option>
<option value="NC" data-select2-id="218">North Carolina</option>
<option value="OH" data-select2-id="219">Ohio</option>
<option value="PA" data-select2-id="220">Pennsylvania</option>
<option value="RI" data-select2-id="221">Rhode Island</option>
<option value="SC" data-select2-id="222">South Carolina</option>
<option value="VT" data-select2-id="223">Vermont</option>
<option value="VA" data-select2-id="224">Virginia</option>
<option value="WV" data-select2-id="225">West Virginia</option>
</optgroup>
</select>
For more details please check here
Related
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.
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
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
How to give placeholder for multiple select in angularjs?
Here only if the search_functional_org is selected, then it_domain will be pre-populated.Is there any method to give placeholders to the multiple select.
<select class="form-control" id="it_domain" name="it_domain" ng-change="loadChart(1)"
ng-model="search_it_domain" multiple
ng-options="t for t in it_domains[search_functional_org]">
</select>
Angularjs directive was declared for single dropdown select as:
angular.directive('select', function($interpolate) {
return {
restrict: 'E',
require: 'ngModel',
link: function(scope, elem, attrs, ctrl) {
var defaultOptionTemplate;
scope.defaultOptionText = attrs.defaultOption || 'Select';
defaultOptionTemplate = '<option value="" disabled selected style="display: none;">{{defaultOptionText}}</option>';
elem.prepend($interpolate(defaultOptionTemplate)(scope));
}
};
});
If you are using select2 with angularJs then here it is .
$(".js-example-responsive").select2({
placeholder: "Select a state",
allowClear: true
});
html
<select class="js-example-responsive js-states select2-hidden-accessible" multiple="" style="width: 75%" tabindex="-1" aria-hidden="true">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>
Link For Docs
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>