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?
Related
With regular html select menus, if you create an option element with selected and disabled attributes and give that option text, then that text will display in the select menu by default. Here is basic html:
<select name="myname">
<option selected disabled>Select one...</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
This is what pages looks like:
But in the below isolated code, I demonstrate that Angular is intrusively not showing the option text:
https://github.com/lovefamilychildrenhappiness/DropDownNoShowDefaultValue
// app.component.html
<h1>Select Box does not show default value: </h1>
<app-select-box
[options]="collection"
></app-select-box>
// select-box.component.html
<select
[value]="value"
[disabled]="disabled">
<option selected disabled value="">Select one...</option>
<option *ngFor="let option of options">{{option}}</option>
</select>
What is causing Angular to disrupt the native html behavior of select boxes?
This is because your select value is bound to a variable called value which is undefined initially. As per the html, there is no option with a value of undefined, so nothing gets selected. Your Select one... option has an empty string value. So to fix this, initialize value in your component to an empty string.
value: string = '';
just put the option to be selected in the first place.
<option value="0">value to be selected<option>
<option value="1">next<option>
<option value="2">Continues<option>
I have a page with a lot of food items there are a few options for me to select for each food item. I want to sequentially select Order for everything on the menu. Is there a script to make this happen? Thanks!
<select class="form-control" onchange="setFlag(999$(this).val(),$('option:selected', this).html());"> </select>
<option value="Order"> Make this order </option>
<option value="Veto"> Veto this order </option>
HTML
<select id="sel">
<option value="Order"> Make this order </option>
<option value="Veto"> Veto this order </option>
</select>
JS
document.querySelector("#sel").value = "Veto" // selects 2nd option from dropdown
I would take a look at this answer https://stackoverflow.com/a/6068322/1115876
something like
$('[value="Order"]').prop('selected', true)
should work
I am trying to toggle ng-selected options in Angular, but am running into some difficulty. Here's what I'm trying:
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option value="0-15" ng-click="toggleSelect(datacut, '0-15')" ng-selected="datacut.ages.indexOf('0-15') !== -1">15 and Younger</option>
<option value="16-19" ng-selected="datacut.ages.indexOf('16-19') !== -1">16 - 19</option>
<option value="20-24" ng-selected="datacut.ages.indexOf('20-24') !== -1">20 - 24</option>
</select>
Controller:
$scope.toggleSelect = function(dc, str){
dc.ages.splice(dc.ages.indexOf(str), 1);
//e.currentTarget.selected = !e.currentTarget.selected;
};
The problem is that when I click on an option gets selected on mousedown, and on release gets unselected. The commented out code also does the same thing.
I feel like this should have a simple solution, but I can't really figure out an elegant solution.
Any help would be much appreciated.
Edit: For clarification - I need to be able to have nothing selected, so clicking a single selected element needs to unselect it. I also need to be able to select multiple options.
Your are using ng-model which does the magic for you. So ng-click and ng-selected is not necessary. See my working fiddle
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option ng-value="'0-15'">15 and Younger</option>
<option ng-value="'16-19'" >16 - 19</option>
<option ng-value="'20-24'" >20 - 24</option>
</select>
It looks like you want to remove the selected age from the ages model. Then you need to use the ng-change directive. And remove the ng-click or ng-selected. But leave the ng-model to access the value on the method that remove the selected item.
See my plunker
<select multiple name="ages" unseletable forbiden-opt="datacut.MIN_AGE" ng-model="datacut.chosenAge">
<option value="" disabled="disabled">Please Select</option>
<option ng-repeat="age in datacut.ages" value="{{age}}">
{{age}}
</option>
</select>
EDIT: This should be made in a directive because you need to update the option html to unselect the option.
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.
just like the title says...I have a combobox, whose options are filled with web service call, activated on the click event.
I need to handle that list and make an option of that list (just the one whose value starts with "-" not selectable).
The "-" works a separator between one option group and the second following one.
So let's say I have this combo:
<select id="authority" class="selectauthority" style="width: 300px;" onclick="DisableSpecificOption()" name="authority">
<option value=""> </option>
<option value="001">Federal Bureau </option>
<option value="003">Police </option>
<option value="-1">-</option>
<option value="004">Army </option>
<option value="018">Navy </option>
<option value="018">CIA </option>
<option value="018">NSA </option>
</select>
As far as I know make the option disabled should be enough...I tried several scripts but I wasn't able to obtain my goal.
My Fiddle
Thank you in advance
edit
Since I have to use it in more than one selector and function I wrote a general one.
Updated Fiddle
Hope it helps somebody
Try
$('#authority option[value="-1"]').attr("disabled","disabled")
or
$('#name option:contains("-")').attr("disabled","disabled")