I want to link two select in angularjs. when first select value in(3,4) the second select show.
code:
<select ng-model="type">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select ng-show="type in [3,4]">
...
</select>
But it is not work.
Thanks.
Here is fiddle :-)
http://jsfiddle.net/svbxwphr/
<div ng-controller="AjaxCtrl">
<h1>AJAX - Oriented</h1>
<div>
Country:
<select id="country" ng-model="country" ng-options="country for country in ['1','2','3','4']">
<option value=''>Select</option>
</select>
</div>
<div>
City: <select id="city" ng-disabled="!cities" ng-model="city" ng-options="city for city in cities"><option value=''>Select</option></select>
</div>
Controller:-
function AjaxCtrl($scope) {
$scope.$watch('country', function(newVal) {
if (newVal==3|| newVal==4){
$scope.cities = ['3', '4'];}
else{
$scope.cities = [];
}
});
}
there is no syntax for in in ng-show.
you have to write long syntax.
<select ng-model="type">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select ng-show="type === '3' || type === '4'">
...
</select>
Related
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>
On button click need to get the dropdown values of each row dont know where the issue is not success in retrieving,the controller goes here,
$scope.values = [];
$scope.Benifit = [{ 'BenefitType': ""},{ 'BenefitType': ""}];
$scope.saveAllValues = function () {
alert($scope.values);
}
HTML
<div ng-repeat="item in Benifit">
<select class="form-control-sm col-md-9" ng-modal="values[$index]">
<option value="">Select</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
</div>
</div>
<button type="button" ng-click="saveAllValues()">Save</button>
Here check out the fiddle
There is a typo on your select change ng-modal with ng-model.
<select class="form-control-sm col-md-9" ng-model="values[$index]">
<option value="">Select</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
Updated Fiddle
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
How can I remove the first empty < option > in the select drop down? I just want the first < option > to be the "-Select-".
html
<div ng-controller="ExampleController">
Distance in KM
<span class="nullable">
<select ng-model="myColor" >
<option value="null">- Select -</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</span><br/>
</div>
script
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.myColor = '';
}]);
Use ng-init to initialize default blank value and also set blank value in option element:
<div ng-controller="ExampleController" ng-init="myColor = ''">
Distance in KM
<select ng-model="myColor">
<option value="">- Select -</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
Or since you are already initializing it in controller, just delete null from option.
I have a dropdown list of countries. and when iam selecting a particular country my output should be filtered with details of only that country to be displayed following is my code but not working properly.
<label for="filtercountry" class="control-label col-xs-2">Filter By Country</label>
<div class="col-xs-2">
<select class="form-control">
<option value="None">-- Select --</option>
<option ng-model="Tofilter.country" value="India" ng-change="changed()">India</option>
<option ng-model="Tofilter.country" value="USA" ng-change="changed()">USA</option>
<option ng-model="Tofilter.country" value="Pakistan" ng-change="changed()">Pakistan</option>
<option ng-model="Tofilter.country" value="China" ng-change="changed()">China</option>
<option ng-model="Tofilter.country" value="Australia" ng-change="changed()">Australia</option>
</select>
</div>`<ul id="result">
Name :{{x }}
`
Put ng-change on the select element:
<select class="form-control" ng-change="changed()">
it's not necessary to put your model in all option, put it in select
<select class="form-control" ng-change="changed()" ng-model="Tofilter.country">
<div class="col-xs-2">
<select class="form-control" ng-change="changed()" ng-model="Tofilter.country" >
<option value="None">-- Select --</option>
<option value="India" >India</option>
<option value="USA" >USA</option>
<option value="Pakistan" >Pakistan</option>
<option value="China" >China</option>
<option value="Australia" >Australia</option>
</select>
</div>