Develop Reference

set the value of select option dynamically

This is my code. I am trying to set the value of select tag from database. but it's not working as expected. My requiremnet is value='Auto' then 0th index should be selected else 1sst index should be selected. But its not happening that way. can some one help me?
<div class="form-group">
<label class="medium mb-1" for=""> Select Mode of Update </label>
<select class="form-control" name="avupdatemode" value="<%= data.updatemode %>" >
<option value="Auto" >Auto Update</option>
<option value="Manual">Manual</option>
</select>
</div>
<script>
var sel= document.getElementById('avupdatemode');
if(document.getElementById('avupdatemode').value =='Auto'){
sel.options.selectedIndex = 0;}
else{
sel.options.selectedIndex = 1;
}
</script>

First there is no id attribute on your select.
Second .value will take the value from the selected option and not the value attribute from the select.
So i've added data-value="sAuto" to the select and then done document.getElementById('avupdatemode').dataset.value == 'Auto'
DEMO
var sel = document.getElementById('avupdatemode');
if (document.getElementById('avupdatemode').dataset.value == 'Auto') {
sel.options.selectedIndex = 0;
} else {
sel.options.selectedIndex = 1;
}
<div class="form-group">
<label class="medium mb-1" for=""> Select Mode of Update </label>
<select class="form-control" id="avupdatemode" name="avupdatemode" data-value="sAuto">
<option value="Auto">Auto Update</option>
<option value="Manual">Manual</option>
</select>
</div>

I am getting my backend data in an array to my ejs page.
So I tried this and it worked:
var sos = <%- JSON.stringify(sos) %>;
I iterated the array and based on the value i set my index for the select option.

vue dataset outputting undefined

I am trying to pass the value and index of an object to a vue method.
My methods is able to show the value but the index is undefined.
Please advise where I did wrong.
JAVASCRIPT:
<div class="select is-info">
<select #change="change_default_canvas($event.target.value,
$event.target.dataset.index)" id="select_business_model_version">
<option>Select Version</option>
<option v-for="(history,index) in all_business_models_hisotry" :key="index" :value="history.canvas_id" :data-index="index">Date : {{history.date_submitted}}</option>
</select>
</div>
$event.target.dataset.index is outputting undefined

You need to access the selected option element and get the data-index from there. Something like this:
$event.target.options[$event.target.selectedIndex].dataset.index

User selectedIndex (index - 1 actually to skip the first option) instead:
<div id="myComp">
<div class="select is-info">
<select #change="change_default_canvas($event.target.value,
$event.target.selectedIndex)" id="select_business_model_version">
<option>Select Version</option>
<option v-for="(history,index) in all_business_models_hisotry" :key="index" :value="history.canvas_id" :data-index="index">Date : {{history.date_submitted}}</option>
</select>
</div>
</div>
Fiddle: https://jsfiddle.net/7ysa14cf/

Change your #change to the following:
<select #change="change_default_canvas" id="select_business_model_version">
In your change_default_canvas method will look like the following:
change_default_canvas(event) {
console.log(event.target.value)
console.log(event.target.dataset.index)
/* your logic here */
}

ngChange a bunch of dropdowns

So I need to entirely change a group of drop downs that appear based on the selection of one dropdown. I believe ngChange is the way to go about it, but I am not entirely sure how to change between two sets of divs (or if that is even the best way of doing it.
So I have this dropdown:
<div class="input-group" theme="bootstrap" style="">
<label>Product Type</label>
<select class="dropdown-menu scrollable-menu form-control" style="" ng-model="event.etype" ng-change="setOptions()" id="etype">
<option value="" selected disabled>Select a Product</option>
<option ng-click="type = 'x'">X</option>
<option ng-click="type = 'y'">Y</option>
<option ng-click="type = 'z'">Z</option>
<option ng-click="type = 'q'">Q</option>
<option ng-click="type = 'w'">W</option>
</select>
</div>
If the choice is X, I need one set of drop downs (contained in one row), and if it is anything else, I need an entirely different set (contained in another row).
Here are how the drop downs look:
<div class="col-lg-3">
<label>Numbers</label>
<ui-select-match placeholder="Select Numbers">{{$item.admin_user.name}}</ui-select-match>
<ui-select-choices repeat="a in ams"> {{a.admin_user.name}} </ui-select-choices>
</ui-select>
</div>
</div>
<div class="row col-lg-12" id="nonX">
<div class="col-lg-3">
<div class="input-group" theme="bootstrap">
<label>Super Heroes</label>
<select class="dropdown-menu scrollable-menu form-control" ng-model="superhero" id="script">
<option value="" selected disabled>Select Superhero</option>
<option ng-repeat="superhero in superheroes" ng-value={{superhero}} ng-click="selectHeroe(superhero)">{{superhero.name}}</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="row col-lg-12" id="noniPad">
<div class="col-lg-3">
<div class="input-group" theme="bootstrap">
<label>Screen</label>
<select class="dropdown-menu scrollable-menu form-control" ng-model="event.screen" id="screen">
<option value="" selected disabled>Select Screen</option>
<option ng-repeat="screen in screens" ng-value={{screen}} ng-click="selectScreen(screen)">{{screen.name}}</option>
</select>
</div>
</div>
<div class="col-lg-3">
<div class="input-group" theme="bootstrap">
<label>Misc Asset</label>
<select class="dropdown-menu scrollable-menu form-control" ng-model="event.miscasset" id="miscasset">
<option value="" selected disabled>Select Misc Asset</option>
<option ng-repeat="miscasset in miscassets" ng-value={{miscasset}} ng-click="slectMiscAsset(miscasset)">{{miscasset.name}}</option>
</select>
</div>
</div>
</div>
<div class="row m-b-sm m-t-sm"></div>
</div>
The separate drop downs both appear in different rows. So I would need one row to appear if they select iPad and one row to appear if they do not select an iPad.
I would love some help. Thank you!

Your best option would be to set the dropdowns of each one depending on the parent selection. There's no need to create a duplicate div to hold both sets of dropdows.
I removed all css classes and any other markup not relevant to the ng-change to make it clearer.
Your parent dropdown would look like this:
<div>
<label>Product Type</label>
<select ng-model="event.etype" ng-change="setOptions(event.etype)">
<option value="">Select a Product</option>
<option ng-repeat="etype in etypes" ng-value="etype" ng-bind="etype"></option>
</select>
</div>
Take special notice of how the setOptions handler is being passed the ng-model value. This means when an option is selected, it'll automatically set ng-model="event.etype" to the value of that option.
To support this behavior in your controller you need to provide the array of event types:
$scope.etypes = ['gif', 'photo', 'ipad', 'video', 'print'];
Then, on your setOptions method you'll get the selected option and filter your descendant dropdowns
var options1 = [{
etype: 'ipad',
value: '1'
}, {
etype: 'gif',
value: '2'
}];
$scope.setOptions = function (etype) {
$scope.scripts = options1.filter(function (item) {
return item.etype == etype;
});
};
What this means is that setOptions will set the descendant dropdowns based on the etype value passed in. In this example I'm limiting to $scope.scripts only but you can set as many as needeed. As you can see options1 is just an array which contains the etype property which I need to filter against.
Finally on your descendant dropdowns you would use the filtered options:
<select ng-model="event.script">
<option value="" selected disabled>Select Script</option>
<option ng-repeat="script in scripts" ng-value="script.value" ng-bind="script.value"></option>
</select>

Using ng-hide="event.etype == null || event.etype=='ipad'" and ng-show="event.etype == 'ipad'" on the row tags solved my issue!

Conditionally showing options in a select with Angular

I am creating a template for showing Select fields in my app. However I have 4 different types of select field. value = id, value = name, value = static_id and value = static_name (it's complicated...).
I plan to migrate these to ngOptions if possible in the future, but for now I am attempting to have a single select template, that will handle all 4 types of field.
I currently use an ng-if to show the different 'static' code for a select, but this creates a lot of code that I want to reduce into this single template.
Here's some code:
// shows a basic select field where option value = id
<div ng-if="field.type=='select'" class="form-group">
<select-field></select-field>
</div>
// shows a basic select field where option value = name
<div ng-if="field.type=='select_name'" class="form-group">
<select-field></select-field>
</div>
// shows a basic select field where option value = static_id
<div ng-if="field.type=='select_static_id'" class="form-group">
<select-field></select-field>
</div>
// shows a basic select field where option value = static_name
<div ng-if="field.type=='select_static_name'" class="form-group">
<select-field></select-field>
</div>
Here, all the field attributes are identical, except for the generated options. Hence why I want to template this.
I am attempting to have this single template have another ng-if inside that will detect the field type, from the JSON it reads, and then change the options displayed accordingly, like this (2 of the 4 examples shown):
<select
name={{field.name}}
class="form-control form-field {{relationshipUrl}}"
id={{field.name}}
data-is-autofocus={{field.focus}}
data-selectreq={{field.rules.selectreq}}
data-showhide={{field.rules.showhide}}
>
<option value="" selected>Please select...</option>
<span ng-if="field.type=='select'">
<option
value={{option.id}}
ng-repeat="option in cache[field.relationshipURL] | orderBy:'name || firstName'"
ng-selected="formData[field.name] == option.id">
{{option.name || option.firstName}}
</option>
</span>
<span ng-if="field.type=='select_static_name'">
<option
value={{option.name}}
ng-repeat="option in cache[field.relationshipURL] | orderBy:'name'"
ng-selected="formData[field.name] == option.name">
{{option.name}}
</option>
</span>
</select>
Possibly horrible code to use a span within the select, but that's why I am coming to you good people. Currently this works in that it shows the correct options, however, it shows the options listed out twice, and I assume it will list them 4 times once all the option types are included. I hope that makes sense. Thanks in advance.

Well no sooner had I posted, the answer was blindingly obvious. Instead of the above approach by removing the span and putting the ng-if on the <option> instead fixed the issue and it works perfectly!
<select
name={{field.name}}
class="form-control form-field {{relationshipUrl}}"
id={{field.name}}
data-is-autofocus={{field.focus}}
data-selectreq={{field.rules.selectreq}}
data-showhide={{field.rules.showhide}}
>
<option value="" selected>Please select...</option>
<option ng-if="field.type=='select'"
value={{option.id}}
ng-repeat="option in cache[field.relationshipURL] | orderBy:'name || firstName'"
ng-selected="formData[field.name] == option.id">
{{option.name || option.firstName}}
</option>
<option ng-if="field.type=='select_name'"
value={{option.name}}
ng-repeat="option in cache[field.relationshipURL] | orderBy:'name'"
ng-selected="formData[field.name] == option.name" >
{{option.name}}
</option>
<option ng-if="field.type=='select_static_id'"
value={{option.id}}
ng-repeat="option in cache[field.relationshipURL] | orderBy:'name'"
ng-selected="formData[field.name] == option.id" >
{{option.name}}
</option>
<option ng-if="field.type=='select_static_name'"
value={{option.name}}
ng-repeat="option in cache[field.relationshipURL] | orderBy:'name'"
ng-selected="formData[field.name] == option.name">
{{option.name}}
</option>
</select>
Thank you anyway #charlietfl very quick response.

I'm a bit late for the answer, but I managed to make a working JSFIDDLE of what I hoped you tried to accomplish.
I factorized your code into a single select and added another select to show you how to display either only one, or all of them.
<div>
<select ng-model="selector">
<option value=""></option>
<option value="">Show everything</option>
<option ng-repeat="option in Options" value="{{option.type}}">{{option.type}}</option>
</select>
</div>
<div ng-repeat="option in Options" ng-show="$parent.selector == option.type || $parent.selector == ''">
{{option.type}}
<select>
<option ng-repeat="choice in option.choices" value="{{choice}}">{{choice}}</option>
</select>
</div>
And the data :
$scope.Options = [
{type:"id", choices:["0", "1", "2"]},
{type:"name", choices:["John", "Doe", "Smith"]},
{type:"static_id", choices:["3", "4", "5"]},
{type:"static_name", choices:["Static 1", "Static 2", "Static 3"]},
];

How to store the selected items in a "Select" field in a model?

I want to display the selected items in a label or list.
I am using switch to switch between form and result. Please see the code below
<div ng-switch on="format">
<div ng-switch-when="form">
<div class="floatLeft">Seeeeeelect</div>
<select multiple="multiple" ng-model="test">
<!--<option value ="sdfsdf" ng-repeat="n in ['a','b','c']">{{n}}</option>-->
<option value ="AAA">AAA</option>
<option value ="BBB">BBB</option>
<option value ="CCC">CCC</option>
</select>
{{test}}
</div>
<div ng-switch-when="result">{{test}}</div>
</div>
<button ng-click="showForm()">Form</button>
<button ng-click="showPreview()">Result</button>
In controller i have the method like below,
$scope.showPreview=function() {
$scope.format='result';
};
$scope.showForm=function() {
$scope.format='form';
};
After selecting the items in list, when i try to switch to see the "result" by tapping "Result" button. The selected item is not populating.
Can anyone tell me where i went wrong.
Thanks

The ng-switch creates sub-scopes. So you have to reference test by $parent.test.
<select multiple="multiple" ng-model="$parent.test">
<div ng-switch-when="result">{{ $parent.test }}</div>
</select>
{{ $parent.test }}
</div>
fiddle