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
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.
I'm trying to build a year picker from the years 1901 to the year 2021, to do this I've created a loop and an empty array in where I store all the values from the loop. The loop goes from 1901 to 2021. The problem is that I don't know how to render those values one by one. I've tried doing a map on the array and return those values, but it returns all the array and not the values one by one.
Here is my code:
import React, {useState} from 'react'
import './signup.css'
function Signup() {
const [useEmail, setUseEmail] = useState(true)
const [year, setYear] = useState([])
const toggleEmail = () => {
if(useEmail) {
setUseEmail(false)
} else {
setUseEmail(true)
}
}
for (var i = 1901; i < 2021; i++) {
year.push(i)
}
console.log(year)
return (
<div className="modalsignup">
<div className="modal____popupform">
<img src="https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png" className="twitterLogo____signup" />
<h1 className="signup_____headertext">Create your account</h1>
<input placeholder="Name" className="placeholder____divcreateaccount"/>
{useEmail ? <input placeholder="Email" className="placeholder____divcreateaccount" />: <input placeholder="Phone" className="placeholder____divcreateaccount"/>}
<div>
<button className="switcher_____button" onClick={toggleEmail}>Use {useEmail ? "phone" : "email"} instead</button>
</div>
<div>
<h4 className="birthdate____signup">Date of birth</h4>
<p className="birthdate______paragraph">This will not be shown publicly. Confirm your own age, even if this account is for a business, a pet, or something else.</p>
</div>
<div className="selector_____options">
<div>
<select className="selector_____months">
<option value="0">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div>
<select className="selector_______days">
<option value="0">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div>
<select>
<option>{year.map(get => {
return get
})}</option>
</select>
</div>
</div>
<div>
<button className="signup_____button">Next</button>
</div>
</div>
</div>
)
}
export default Signup
This is what I'm trying to achieve:
And here is the outcome I'm getting with the map method:
Any help I would really appreciate it.
The answer by viet is correct, but he might have missed few things , you need to pass value and key for option after mapping
Other observation do not loop inside a function like that , the reason is every time the React remounts the for loop will run and no need of using useState unless you are changing state , so use a loop outside the React Function it will run only once
const getYears=(start,end)=>{
let _years=[]
for(let i=start;i<=end;i++){
_years.push(i)
}
return _years
}
let years = getYears(1901,2021)
export default function App() {
return (
<div className="App">
<div>
<select >
<option value="0">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div>
<select className="selector_______days">
<option value="0">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div>
<select>
{years.map(get => {
return <option value={get} key={get}>{get}</option>
})}
</select>
</div>
</div>
);
}
You can refer to codesandbox below if you need
Just move option inside map:
<select>
{year.map((get, i) => {
return <option key={i}>{get}</option>;
})}
</select>
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
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 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>