I have a dropdown:-
<select class="select" id="select" multiple="multiple" ng-model="a.NA">
<option value="1">1</option>
<optgroup label="group">
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</optgroup>
</select>
And a checkbox:-
<input type="checkbox" id="a.clM.checkbox2" value="option1" ng-disabled="a.NA">
<label for="a.clM.checkbox2">NA</label>
When I check 'NA' checkbox the dropdown is disabled,so no one can check the inner checkboxes of the dropdown.
But if I check anyone of the inner checkboxes first then check NA checkbox the dropdown got disabled but the checked inner checkboxes remains checked.
What I want is if I check the NA checkbox the inner checkboxes got unchecked(if checked).
Related
In my template i'm writing a form. But there is a problem. I want to show a dropdown select menü if checkbox is checked. Otherwise it won't be visible. Here is my codes:
<label for="webcam">Webcam*</label>
<input type="checkbox" name="webcam" value="checkbox">
<select>
<option value="1">1</option>
<option value="2">1</option>
<option value="3">1</option>
<option value="4">1</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 want to tell user to select any option from select other than first (index=0). I saw few examples and tried but not working for me:
<select ng-model="patient.gender" name="gender" class="form-control" required>
<option>- Select -</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
<div class="error" ng-show="Form.gender.$invalid">
Select gender
</div>
What to change here?
provide empty(default value) to option, so required field validation will fire on selection.
Html:
<select ng-model="patient.gender" name="gender" class="form-control" required>
<option value=''>- Select -</option> //Default value to empty
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
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 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>