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
Related
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
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 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>
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>
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>