Develop Reference

Angular select and constants: how to select default option?

I've got a select element, like this:
<select id="fieldName"
class="form-control"
ng-model="condition.type">
<option value="{{constants.TYPE_SORT_BY_SENDER}}">
{{locale('Sender')}}
</option>
<option value="{{constants.TYPE_SORT_BY_RECIPIENT}}">
{{locale('Receiver')}}
</option>
<option value="{{constants.TYPE_SORT_BY_DATE}}">
{{locale('Date')}}
</option>
<option value="{{constants.TYPE_SORT_BY_ATTACHMENT}}">
{{locale('Has attachment')}}
</option>
<option value="{{constants.TYPE_SORT_BY_SUBJECT}}">
{{locale('Subject')}}
</option>
</select>
constants object is defined in $rootScope on $stateChangeStart event, so when I look on this element using firebug it looks ok.
But the problem is that this select is not selecting the correct option on page load: if I change a constant to the number it works fine.
I don't want to have any magic numbers in my template, but I can't get this select to work.
What should I do here?

Prevent Blank Select in Angular

I updating a form to angular. The selects in it are not generated by angular. I am using angular to add some interactivity and submit the form. I am having an issue where angular is adding a blank select to the element. Is there a way of preventing this without having angular generate the select?
<select name="inventory_status" ng-model="formData.inventory_status">
<option ng-selected="true" ng-value="1">Active</option>
<option ng-value="2">Discontinued</option>
<option ng-value="3">Special Order</option>
<option ng-value="4">Pre-Order</option>
</select>
The above code produces this:
<select name="inventory_status" ng-model="formData.inventory_status" ng-init="sortorder='1'" class="ng-pristine ng-valid ng-touched"><option value="? undefined:undefined ?"></option>
<option ng-selected="true" ng-value="1" value="1" selected="selected">Active</option>
<option ng-value="2" value="2">Discontinued</option>
<option ng-value="3" value="3">Special Order</option>
<option ng-value="4" value="4">Pre-Order</option>
</select>
My hope is to not have this produced:
<option value="? undefined:undefined ?"></option>
Additionally I would like to not have to use angular to generate the dropdown although if that is the only option I could. This only happens when I set this field to ng-model. I am setting it to ng-model because I want to use angular to submit the form.
Thanks in advance.

Set $scope.formData.inventory_status = 1 or whatever value you want selected and it will not show the empty option, plus you don't need ng-selected if you set the value.

Change option value to selected if same url

Good morning,
I have a form
<select name="select" onchange="window.open(this.options[this.selectedIndex].value,'_self')">
<option selected="selected">Select your size</option>
<option value="https://www.webpage.com/01">Size S</option>
<option value="https://www.webpage.com/02">Size M</option>
<option value="https://www.webpage.com/03">Size L</option>
<option value="https://www.webpage.com/04">Size XL</option>
</select>
So if people select size S they go to https://www.webpage.html/01 and so on.....
On al the pages i have the same select form, but how can i change the chosen option as selected="selected" using javascript?
So if people select size M, the go to https://www.webpage.com/02 and that the form is displaying size M on this page. So if option value url is the same as the page url it automaticly give the select="selected" to this option.
maybe a dump question, but javascript isnt my best part ;)
Thanks for all your help.

You can try
$("option[value='" + window.location.href.toString() + "']").closest("select").val(window.location.href.toString());
It will find the option exactly matching with page url

If url exactly corresponds option values
$("selectElementId").val(window.location);

You can achieve this using javascript or jQuery
HTML
<select name="select" id='option' onchange="window.open(this.options[this.selectedIndex].value,'_self')">
<option selected="selected">Select your size</option>
<option value="https://www.webpage.com/01">Size S</option>
<option value="https://www.webpage.com/02">Size M</option>
<option value="https://www.webpage.com/03">Size L</option>
<option value="https://www.webpage.com/04">Size XL</option>
</select>
jQuery solution
$(document).ready(function(){
$('#option').on('change',function(){
$("#option option:selected").attr('selected','selected');
});
});

If you want to do this with JavaScript only, I would recommend you to do this:
add an id attribute to each of the option tags
<option id="sizeS" value="https://www.webpage.com/01">Size S</option>
<option id="sizeM" value="https://www.webpage.com/02">Size M</option>
add a name attribute to the body-tag of each page:
For example, on the page https:.../01:
<body name="S">
add this function to the JavaScript part of each page:
function updateForm() {
var currentSize = document.getElementsByTagName['body'][0].getAttribute('name');
document.getElementById("size" + currentSize).selected = "selected";
}
execute the function updateForm() when loading the page. For example, with onload:
<body name="M" onload="updateForm()">
you can also use an event listener with the "DOMContentLoaded" event, click here for more information:

Set default value in select when the ng-model is null

I'm new to angular and i'm trying to set a default state to select when my ng-model is null. Basically I want to set it to 'None' if the model is empty. I tried the below code but it's not working.
<select ng-init="item.carType | item.carType='none'" ng-model="item.carType">
<option value="none">None</option>
<option value="manual">Manual</option>
<option value="auto">Auto</option>
</select>

Try this:
<select ng-init="item.carType = item.carType || 'none'" ng-model="item.carType">
<option value="none">None</option>
<option value="manual">Manual</option>
<option value="auto">Auto</option>
</select>
That said, per the docs, this is probably a misuse of ngInit. The proper way to do this would be to initialize your model with sane values in the controller (or service, if that's where it came from).

H i ,
My thoughts are it is best to do this in the app rather than the template.
if(typeof $scope.item.carType==="undefined") {
$scope.item.carType="none";
}
or simply setting the value
$scope.item.carType="none";
before it is updated with whatever you are using to set the value : -
$scope.item.carType="none";
$scope.item.carType=someasyncfunctionthatmighttakeawhileandthetemplateisrenderedbeforeitarrives();

You can solve using a value in ng-init
<select ng-init="item.carType='none'" ng-model="item.carType">
<option value="none">None</option>
<option value="manual">Manual</option>
<option value="auto">Auto</option>
</select>

What I would suggest you to do is this.
Make a function in your controller and check if $scope.item.carType == undefined assign a default value.
$scope.setDefaultValueForCarType = function () {
if($scope.item.carType == undefined) {
$scope.item.carType = "none";
}
}
This will work too.
<select ng-init="item.carType='none'" ng-model="item.carType">

Often happens that your ng-model="item.carType" doesn't match any of the select option keys because of the wrong case.
For example: item.cartType is "Manual" but in the options you have an option <option value="manual">Manual</option> in this case it won't work and in the console output you'll see something like this: <option value="? string:Manual ?"></option>
So, either correct your data model or your select option value:
<option value="Manual">Manual</option>

What you are looking for is undefined.
If the value is undefined do you need a value to go to the database when 'none' is selected?
If sending an empty is acceptable you may consider the following:
<select ng-model="item.carType">
<option value="">None</option>
<option value="manual">Manual</option>
<option value="auto">Auto</option>
</select>
Fiddle
This allows you to pass in a value as well and use the same form for edits and new records.

Based on Rob Sedgwick idea, in a pinch deadline I'm not using $scope so with controller as syntax.
loadStates(); //this calls my function for my code
// this is based on what Rob S. is doing with $scope
if(typeof vm.scriptQuestion.statecode ==="undefined") {
console.log('in');
vm.scriptQuestion.statecode = "AA"; // "AA" happens to be the value of the default name for All of my States that is then displaying "ALL" now when before it was blank
}
Here is my Select ( yes, this is a garbage way of doing angular select boxes as ng-repeat is very limited for a select )
<select id="States" ng-model="vm.scriptQuestion.statecode">
<option ng-repeat="state in vm.states" value="{{state.StateCode}}">{{state.StateName}}</option>
</select>

I've made the following changes to your code and it should work now. I've removed the second part in ng-init="" and set the None option value to undefined.
<select ng-init="item.carType='none'" ng-model="item.carType">
<option value=undefined>None</option>
<option value="manual">Manual</option>
<option value="auto">Auto</option>
</select>

how to get combobox text in java script from jsp page

I want to pass the test in the combobox to another page as included in query string using JavaScript
<select name="classn" id="classnId" onchange="populate()" >
<option value="select">--Select--</option>
<option value="1">I Class</option>
<option value="2">II Class</option>
<option value="3">III Class</option>
here is the populate function
function populate(){
$.ajax({url:"getbatchno.jsp?itid="+$('#classnId').val(),success:function(result){
}});}
but using the above Script I am able to pass only the value part of combobox and I need to pass the text also(I Class,II Class,... etc).

to get text of selected option with jQuery you could use that:
$('#classnId option:selected').text();