The majority of select / option solutions for Angular 2 work in a way that we return the actual content, not the value attribute. However, since I'm still learning Angular 2, I want to get the actual value attribute on clicking a button. I managed to somewhat solve this issue, but I'm not sure if this is the correct approach.
Below is the example of how I'd like it to work:
<select #selectedCategory>
<option *ngFor="#category of categories" [value]="category.id">{{category.name}}</option>
</select>
<button (click)="getValueFromSelect(selectedCategory.value)">
/* This returns the selected category.name, not the value attribute. */
The solution above creates the following HTML (note the lack of value attribute on option):
<select _ngcontent-oom-3="">
<!--template bindings={}-->
<option _ngcontent-oom-3="">stuff 1</option>
<option _ngcontent-oom-3="">stuff 2</option>
<option _ngcontent-oom-3="">stuff 3</option>
</select>
The solution below actually works, however, I need an ngModel in order to make it work.
<select [(ngModel)]="selectedCategory">
<option *ngFor="#category of categories" [value]="category.id">{{category.name}}</option>
</select>
<button (click)="getValueFromSelect(selectedCategory.value)">
/* This returns the value attribute correctly; however, do I really need a ngModel for one value? */
What is the correct way to approach this situation?
Thank you for your suggestions.
As discussed in the comments, the "how I'd like it to work" example does work:
<select #selectedCategory>
<option *ngFor="#category of categories" [value]="category.id">
{{category.name}}
</option>
</select>
<button (click)="getValueFromSelect(selectedCategory.value)">click me</button>
Plunker
However, we must use beta.15 for this to work. See the changelog for beta.15 for more info:
select: set value individually from ngModel (e1e44a9), closes #7975 #7978
I prefer this approach since it does not add a property to the component, nor do we need to use a <form> tag (like in #Thierry's answer).
You could use a control defined inline with the ngControl directive:
<form>
<select #categoriesCtrl="ngForm" ngControl="categoriesCtrl">
<option *ngFor="#category of categories" [value]="category.id">
{{category.name}}
</option>
</select>
<button (click)="getValueFromSelect(categoriesCtrl.value)">
</form>
See this plunkr: https://plnkr.co/edit/uWUS9RaGJ34PiXTJ1kPd?p=preview.
you could do using change event call
<form>
<select #categoriesCtrl (change)='SelectedValue = categoriesCtrl.value'>
<option *ngFor="#category of categories" [value]="category.id">{{category.name}}</option>
</select>
<button (click)="getValueFromSelect()">Get value</button>
</form>
Working Example https://plnkr.co/edit/dQZgSyw6uc67UNhNDlZv?p=preview
Related
I have an input with [disabled] depending upon the ngModel of another input. Initially [disabled] is working properly but not when we change the dependant input value, the [disabled] property is not working. How to apply two binding on [disabled] property?
Following is the code snippet.
<select [ngModel]="isDisabled" (ngModelChange)="isDisabled=$event">
<option value="0">Disabled</option>
<option value="0">Enabled</option>
</select>
This model isDisabled is changed correctly. I could see the value change like this in template {{isDisabled}}. But not reflected in the [disabled] property of the select box.
<select [ngModel]="userInput" [disabled]="isDisabled">
<option value="test">Test</option>
</select>
The primary problem was you were using same value 0 for both option. But even if you change them to 1 & 0 respectively for Enable & Disable. It will not gonna work because value attribute stores values as '0'(string '0') & '1'(string 1) (in short stringify value of it).
You could easily solve this dataType issue of value by using ngValue attribute binding.
<select [ngModel]="isDisabled" (ngModelChange)="isDisabled=$event">
<option [ngValue]="1">Disabled</option>
<option [ngValue]="0">Enabled</option>
</select>
Plunker Demo
you need to add a name attribute to the input and make the ng-mode two-way binding by wrapping up with parenthesis also. no need to use the ngModelChange for this purpose
<select [(ngModel)]="isDisabled" name='isDisabled'>
<option value="0">Disabled</option>
<option value="1">Enabled</option>
</select>
<select [(ngModel)]="userInput" [disabled]="isDisabled == '0'" name='userInput'>
<option value="test">Test</option>
</select>
In your question, both option values are 0.
You'll want to ensure that one is true, with the other being false
Component:
component class {
myVar = false
}
Template:
<select [(ngModel)]="myVar">
<option value="true">...</option
<option value="false">...</option
</select>
<select [disabled]="myVar">
<option>...</option
</select>
Try to use true\false for [disabled] it will save your function comparator, and use 2-way binding directly.
Like:
<select [(ngModel)]="isDisabled">
<option value="true">Disabled</option>
<option value="false">Enabled</option>
</select>
<select [ngModel]="userInput" [disabled]="isDisabled">
<option value="test">Test</option>
</select>
See Plunker
I have an angularjs dropdownlist using ng-options
<select ng-options="perlocation.name for perlocation in locations" ng-model="locationDropdown">
My dropdown list loads fine but the selected option 0 is empty and i want to replace it with "Please Select One"
<option value="?" selected="selected"></option>
How do i do this? All the examples i have seen online doesnt seem to work.
Thanks
In the angular documentation for select it states
Optionally, a single hard-coded element, with the value set
to an empty string, can be nested into the element. This
element will then represent the null or "not selected" option. See
example below for demonstration.
Which means you can do this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-init="arr=[1,2,3]">
<select ng-model="val" ng-options="x for x in arr">
<option value="">Please select an option</option>
</select>
<br>
Val: {{val}}
</div>
</div>
Initialize $scope.locationDropdown = 'Please Select One' as default
or
<select ng-options="perlocation.name for perlocation in locations" ng-model="locationDropdown">
<option> Please Select One </option>
</select>
I have a select element with six options, the first being a blank option:
<select name="method-rcvd" class="form-control" ng-model="workRequest.ReceiveMethod" required >
<option value="" ng-selected="true"></option>
<option value="1">Phone</option>
<option value="2">Email</option>
<option value="3">Fax</option>
<option value="4">Mail</option>
<option value="5">Other</option>
</select>
On the scope is the object property bound to this select:
$scope.workRequest.ReceiveMethod = "";
For some reason, the select ALWAYS defaults to "Phone", instead of blank. I want it to default to blank. When I remove the model binding it works, so I know it has something to do with that, but it needs to be bound. This seems to me that it should be relatively straightforward, but I am having a very difficult time getting this simple thing working.
When I spit out the value of ReceiveMethod below the select:
Receive Method: {{workRequest.ReceiveMethod}}
It always defaults to "1". How can I get this to default to the first option, the blank option?
Thanks.
Are you setting a default value in the controller?
What happens if you set default value to 0 instead of ''?
That should work but something must be setting another value on workRequest.ReceiveMethod
I got this working by using the ng-init directive, like so:
<select name="method-rcvd" class="form-control"
ng-model="workRequest.ReceiveMethod"
ng-init="workRequest.ReceiveMethod = ''" required >
<option value=""></option>
<option value="1">Phone</option>
<option value="2">Email</option>
<option value="3">Fax</option>
<option value="4">Mail</option>
<option value="5">Other</option>
</select>
You also don't need the
ng-selected="true"
in the first (blank) option.
I am trying to disable option items in a dijit/Form/FilteringSelect. Here is code
<select id="filtSelect" dojoType="dijit.form.FilteringSelect">
<option disabled="disabled">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Please help me.
You can do it this way: ( Vers. 1.9 )
<select data-dojo-type="dijit/form/" id="count" name="count">
<option disabled="disabled">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Here's the full fiddle for my Example above(Edited by Thomas Upton): http://jsfiddle.net/tupton/266C4/
and here the reference from dojo: http://dojotoolkit.org/reference-guide/1.9/dijit/form/FilteringSelect.html?highlight=filteringselect
In the 1.6 Vers it must look like:
<script>
dojo.require("dijit.form.FilteringSelect");
</script>
<body class="claro">
<select dojoType="dijit.form.FilteringSelect" id="fruit" name="fruit">
<option value="AP" disabled>
Apples
</option>
<option value="OR" selected>
Oranges
</option>
<option value="PE">
Pears
</option>
</select>
</body>
Here the fiddle for this Version: http://jsfiddle.net/Q4zw6/
It's important that you load the instance of dijit.form.filteringSelect to use it.
Regards, Miriam
I don't believe you can disable options with dijit/form/FilteringSelect because it is store-based and is supposed to let a user enter any text.
There is a property called displayedValue, which you can use to set whatever you want. However, with FilteringSelect, any text that isn't an option is marked as erroneous input, as seen by the following code and this jsfiddle.
<select data-dojo-type="dijit/form/FilteringSelect" data-dojo-props="displayedValue: 'Select'" id="count" name="count">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
You could use a dijit/form/ComboBox in exactly the same manner; the difference between FilteringSelect and ComboBox is that the latter allows any input. See the documentation for more information.
The issue is that FilteringSelect relies on dojo data store, as others have pointed out. So if you don't create that manually, it will happen behind the scenes and you just won't know how to reference it. But on second thought, looking at the API I notice FilteringSelect has a property named store.
So, you either need to create the data store yourself & initialize the FilteringSelect with it (http://dojotoolkit.org/reference-guide/1.9/dijit/form/FilteringSelect.html) or retrieve it by using dijit's byId and then accessing the "store" property.
Then, manipulate that data store. Maybe store a temporary copy before you remove the option if you want to restore it after. If you look up data store I'm sure removing an option is trivial. Sometimes with widgets it happens that you need to trigger a re-rendering method also to have it update after (you can usually find some method in the widget's API for this, sometimes "reset"), though I believe with stores it may watch them more intelligently.
I'm trying to figure out how (if possible, which I'm sure I can) to use a different value to that selected in a drop down box in HTML. Happy to use jQuery or JavaScript. So for example I have a series of dropdowns as follows:
<select id="country" title="Country">
<option>Argentina ARG</option>
<option>Australia AUS</option>
<option>Austria AUT</option>
<option>Austria AUT</option>
<option>Belgium BEL</option>
<option>Brazil BRA</option>
<option>Canada CAN</option>
</select>
Naturally when a user chooses say 'Brazil' the option displays 'Brazil BRA'. However, I would like to instead use the value 'BRA' is it possible to do this? Am I just being dumb and it can be done in plain HTML?
<option value="BRA">Brazil BRA</option>
Side note: I believe IE6 needs that value or things get funky onsubmit.
Use the value attribute: http://www.w3schools.com/tags/att_option_value.asp
<select id="country" title="Country">
<option value="ARG">Argentina</option>
<option value="AUS">Australia</option>
</select>
You can use the options value-attribute. This way the text that is shown to the user is Argentina ARG, but the value that is posted with the form is just ARG.
<select id="country" title="Country">
<option value="ARG">Argentina ARG</option>
<option value="AUS">Australia AUS</option>
...
</select>