I have a scenario where i need to display options in dropdown with binded value and some text prefix to it
html:
<select ng-model="rounds" ng-change="fnTopRating(rounds)" class="col-xs-4" ng-options="rounds for rounds in [1,2,3,4]">
<option value=''>round wise</option>
<option>Round {{rounds}}</option>
</select>
but here i am not getting round 1,round 2... in drop down instead i am getting 1,2,3,4...
I am not clear with what is happening .
Any help is appreciated.
Well, at first your syntax is a bit wrong. I'd recommend you to check the docs.
To add a prefix in your options you should use single quotes, like this:
<select ng-model="rounds" ng-change="fnTopRating()" class="col-xs-4" ng-options="'round ' + r for r in [1,2,3,4]">
<option value label="round wise"></option>
</select>
Note: You just need to use $scope.rounds in your controller to get the selected item in fnTopRating() function, you don't need to pass it as parameter.
Related
I would remove the blank first option from a select ng-model and put instead the first value of an array.
Here is my code:
<div class="col-9">
<select ng-model="chooseOrg"
formControlName="orgTypeId"
class="editmodal-object">
<option [ngValue]="orgType.id" *ngFor="let orgType of allOrgType" style="text-transform:uppercase;">{{orgType.description}}</option>
</select>
</div>
My array has no blank value inside, but it's composed of 5 object. I just want the first one always the default value of my select.
Since you are using ngmodel you should have it changed when you change the formControlName. I think having both makes it not working properly. So remove ngmodel and rely on formControlName and check for changes and set chooseOrg that way.
Another good thing to know is that you can set the default value for new FormControl() by having the default value 1 for example in the method like this:
new FormControl(1)
I made a stackblitz for you to show you what I mean. https://stackblitz.com/edit/angular-ivy-klwglz?file=src/app/app.component.html
<select [(ngModel)]="scheduleComment" class="form-control"
(change)="getSchedCommentsList($event)"
#sched="ngModel">
<option [ngValue]="null">Choose Schedule Comments</option>
<option *ngFor="let scheduleComment of scheduleComments"
[ngValue]="scheduleComment">{{scheduleComment}}</option>
</select>
I've tried using the [(ngModel)] capability to update a field with a new value assigned within a component (separate from the assignment made within the select '*ngFor="let scheduleComment of scheduleComments'" option).
However, the select box value seems impervious to any updates outside the of the initial selection. I've seen other examples using ngChangeForm as well but that doesn't seem to be applicable to this situation, unfortunately.
Can anyone provide an example of how this might be done? That is updating a value independently from the initial value selected.
Thanks
I have a select box.
When no value is selected, I have the empty option --. It's OK !
Once an option is selected, the empty option disappears.
But I would like that it is always there to have the opportunity to choose --.
Is it possible ?
<select ng-model="project" ng-options="act.id as act.name for act in actors"></select>
please see here:http://plnkr.co/edit/SWpRZA1dafNNva70z6KE?p=preview
<select ng-model="project" ng-options="act.id as act.name for act in actors">
<option value="">--<option>
</select>
ng-options gets priority when any option is selected from .
As per the standard html can contain . Thus the mentioned option gets priority as the selection is null.
And in view, html priority is higher, thus always value is seen unless the ng-option value already selected from controller.
I'm using an adaptation of PHPBB to create a drop-down list.
<select name="destination_path">
<!-- BEGIN path -->
<option value="{path.DESCRIPTION}">{path.DESCRIPTION}</option>
<!-- END path -->
</select>
The list is generated from a MySQL query, so it is dynamic. This list is within a form and when the form is fired I want to retain (and return) it's state in session variables. My first thought was to place something in the <select> statement.
I know you can use:
selected="option_selected"
in the relevant <option>, but it seems like a messy way to do this and would require an if statement to compare each tag as the tag is created.
Is there a way to declare the default option in the select tag, or a better defined method to achieve the same result?
Short answer: No.
The select tag defines the selected option in its option elements. What you could do if you want to achieve it differently, is putting the selected option on top without specifying a selected attribute. Most browsers select the first option as default if there is no selected attribute present.
Ex :
<select>
<option value="Hi"> Hi </option>
<option value="Hello" selected> Hello </option>
</select>
You may be able to select the option you need after compiling the list by adding a little jQuery.
A similar question has been asked on the jQuery Forums.
Using the example of:
<select name="options">
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
</select>
You can set the selected option by value:
$('[name=options]').val( 3 ); // To select Blue
Or you can set the selected option using the text:
$('[name=options] option').filter(function() {
return ($(this).text() == 'Blue'); //To select Blue
}).prop('selected', true);
Links to jsFiddle can be found in this post.
Credit to: Godsbest on the jQuery Forums.
Yes.... there is a way to declare the default option in the select tag
Try this...
To set a default value first you have to mention the name of the select tag and in the find() function just pass the value you have to set as default value.
$('select[name="destination_path"]').find('option:contains("default")')
.attr("selected",true);
I'm looking to create a select statement where each option contains quantity and price for an item we're selling. I thought I would create a table where for every row, quantity would be in one , and price would be in the other . I can't seem to get this to work in a select statement. I also tried using tags with a float-right and float-left and this didn't work either. Anyone have any ideas?
You can't do this with plain vanilla HTML. You'll need to grasp Javascript to mimic such a dropdown with help of other HTML elements and a good shot of CSS. You can get here some ideas what's all possible with good JS (actually, jQuery) and CSS code.
One thing I've done with plain html is to just add the appropriate number of to line everything up correctly. JavaScript is probably the better way to go though.
You can't do this in plain HTML - you'd have to look at a javascript combo box replacement.
As an alternative to the above answers, you could just make the text of the options to make sense as english ..
something like
<select name="..">
<option value="1">1 item for xx price</option>
<option value="2">2 items for xxx price</option>
....
<option value="5">5 item for xxxx price</option>
</select>