I have a select menu using ng-options to repeat the options, and I have a default <option> inside the menu:
<select ng-model="selected" ng-options="d.id as d.value for d in data">
<option value="">Choose an option</option>
</select>
Problem: I want to make it so that the text inside that default option changes based off another property in the $scope, and I tried the following and it doesn't work:
<select ng-model="selected" ng-options="d.id as d.value for d in data">
<option value="" ng-if="!optional">Choose an option</option>
<option value="" ng-if="optional">Choose an option (optional)</option>
</select>
It seems it will only show one default <option> element, so I also tried the following with ng-show but it doesn't work either:
<select ng-model="selected" ng-options="d.id as d.value for d in data">
<option value="">Choose an option <span ng-show="optional">(optional)</span></option>
</select>
I know you can also do <option ng-repeat> inside the select menu, but the data for the options comes from an AJAX call and doesn't update correctly when the data first comes in, so I'm sticking to using <select ng-options>.
Here's a JSFiddle with the problem.
Any suggestions for how I could go about getting this to work?
Your first try didn't work because, as said by the documentation of select in AngularJS, only "a single hard-coded <option> element can be nested into the <select> element".
Your second try didn't work because the <option> element can only receive "text (with eventually escaped characters like é)" as content, and not any tag like the <span> you've tried.
The solution is simply to use interpolation:
<select ng-model="selected" ng-options="d.id as d.value for d in data">
<option value="">Choose an option {{optional ? '(optional)' : ''}}</option>
</select>
Have you tried setting the text with template markup?
<select ng-model="selected" ng-options="d.id as d.value for d in data">
<option value="">{{defaultOptionText}}</option>
</select>
Working at this jsfiddle: http://jsfiddle.net/udu9byka/2/
Related
I use [ngModel] to assign the currently selected option to a dropdown menu, and when the page is loaded initially this works fine, but sometimes when updating the data while the page is still loaded, the dropdown displays an incorrect value, but the model itself is still correct.
<select *ngIf="effect.type == ruleEffects.ApplyTemplate" class="form-select"
[disabled]="readOnly" [ngModel]="effect.impact"
(ngModelChange)="updateImpact($event, j)">
<option *ngFor="let template of templates" [value]="template.TemplateName">
{{template.TemplateName}}
</option>
</select>
Verifying {{effect.impact}} shows that the correct template is currently selected, but the dropdown box will still list an incorrect value.
How can I fix this problem?
Can you try something like this?
<select *ngIf="effect.type == ruleEffects.ApplyTemplate" class="form-select"
[disabled]="readOnly" [(ngModel)]="effect.impact">
<option *ngFor="let template of templates" [value]="template.TemplateName">
{{template.TemplateName}}
</option>
</select>
Did you try using [ngValue] instead of [value]?
<select *ngIf="effect.type == ruleEffects.ApplyTemplate" class="form-select"
[disabled]="readOnly" [(ngModel)]="effect.impact">
<option *ngFor="let template of templates" [ngValue]="template.TemplateName">
{{template.TemplateName}}
</option>
</select>
For some reason my ng-model is not valid against select options compiled by AngularJS. This is common problem but I did not find a solution that works here.
The select is inside tr element repeated by ng-repeat.
This is my select, ng-model in most cases equals to 1, but an extra question mark option is selected instead:
<select class="form-control ng-pristine ng-valid ng-not-empty ng-touched"
ng-model="item.parent_id" ng-change="validateRow(item)"
ng-options="option as option.name for option in options_parent_names track by option.id">
<option value="?" selected="selected"></option>
<option label="Moja Firma" value="1">Moja Firma</option>
<option label="Dział Finansowy" value="74">Dział Finansowy</option>
<option label="Biuro obsługi klienta" value="76">Biuro obsługi klienta</option>
<option label="Magazyn" value="77">Magazyn</option>
<option label="Dział zamówień" value="78">Dział zamówień</option>
<option label="Dział X" value="80">Dział X</option>
<option label="Inny dział" value="91">Inny dział</option>
<option label="Dział Y" value="92">Dział Y</option>
<option label="Dział Z" value="93">Dział Z</option>
</select>
I am using track by which helps by removing number: part from option value attribute
Tried convert-to-number directive but that does not change anything.
Tried ng-repeat instead of ng-options
Tried generating options by PHP but that does nothing more than spamming HTML
Tried using ng-value in options
Tried ng-model with | number filter
Tried casting value to number before it goes into ng-model
What eventually worked out was generating options in HTML with no ng-options.
I have the following code:
<select #typ class="input" (change)="changeIndex(typ.value)">
<option *ngFor="let creation of creationComponent>{{creation.name}}</option>
</select>
If I start the application the selection has automatically selected the first option. But I don't want that. Why is this and how can I fix it?
Found a better answer here:
https://stackoverflow.com/a/13492609/5039495
We can use selected, disabled and hidden on the default option, this is recognized by safari.
<select>
<option selected disabled hidden></option>
<option>1</option>
<option>2</option>
</select>
Outdated
The trick is setting an empty option with display:none.
<select>
<option style="display:none"></option>
<option>1</option>
<option>2</option>
</select>
Warning: As reported by other users, this solution doesn't work in Safari and iOS Safari
This is a common thing... Just add an empty <option> as the first:
<select #typ class="input" (change)="changeIndex(typ.value)">
<option></option>
<option *ngFor="let creation of creationComponent>{{creation.name}}</option>
</select>
You cannot have anything unselected for a <select> tag. This should fix it. Quoting from Turnip's comment: A select has to have a selected option. If you don't explicitly set one using the selected attribute the first will be used. For a better version, you can use the following code with selected attribute:
<select #typ class="input" (change)="changeIndex(typ.value)">
<option selected="selected" value=""></option>
<option *ngFor="let creation of creationComponent>{{creation.name}}</option>
</select>
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 have a listbox that I am creating with a select, using AngularJS ng-repeat. The listbox is created correctly, and when I select one of the items and click my button, I get to the function and have the information I need.
My html code is as follows:
<select size="6" ng-model="item" ng-options="s.name for s in itemlist"></select>
<button class="btn tt-btn-blue" ng-model="singleModel" ng-click="onLoadClicked(item.id)">Load</button>
My problem is that when the listbox paints, it has one item at the top that is blank. When I inspect the listbox during a run in Chrome, I get the following output in the console:
<select size="6" ng-model="item" ng-options="s.name for s in itemlist" class="ng-pristine ng-valid">
<option value="?" selected="selected"></option>
<option value="0">Item 1</option>
<option value="1">Item 2</option>
<option value="2">Item 3</option>
<option value="3">Item 4</option>
<option value="4">Item 5</option>
<option value="5">Item 6</option>
</select>
I am wondering how I can get rid of the first option inserted by the ng-repeat. I don't want to see a blank space at the top of the listbox. I realize one option would be to set the first actual option (value="0") as the selected item, but I would rather have no selected items to start.
Any time you see <option value="?" selected="selected"></option> in the select, it means that your ng-model is set to a value that isn't in the ng-options. So, if you don't want the blank option, you need to make sure item is set to a value in your itemlist. This could be as easy as having the following in your controller:
$scope.item = $scope.itemlist[0];
This will give it an inital value, and then angular will update it for you thereafter.
simplest way to make sure that automatically added option by angular is hidden is ng-if directive.
<select ng-options="option.id as option.description for option in Options">
<option value="" ng-if="false"></option>
</select>
I have found the solution after a long RND
Please find the following code it will work for you.
Here is the HTML Code
<div class="col-xs-3" ng-controller="GetUserADDetails">
<label>Region</label>
<select id="DDLRegion" ng-model="selectedregion" class="form-control" ng-change="getBranched(selectedregion)">
<option value="" >--Select Region--</option>
<option ng-repeat="region in Regions" value="{{region.LookupID}}">{{region.LookupValue}}</option>
</select>
</div>
Here is the Module Code
var app = angular.module("UserMasterModel", [])
.controller("GetUserADDetails", function ($scope, $http,$log) {
$http({
method: 'GET',
url: '/UserMaster/GetAllRegion'
})
.then(function (response) {
$scope.Regions = response.data;
//$log.info(response);
});
});