I have this html element:
<select class="form-control" ng-model="current.data.sites" ng-options="item.Id as item.Description for item in current.lookups.siteReg | filterByIdArray: current.data.sites">
<option value="">--Data--</option>
When I open the dropbox I want the items to be displayed but I want to make the unselectable.
Any idea how can I make items in dropbox unselectable?
You need to set disabled on the option tag. If you want to make all options disabled then you have to use ng-repeat rather than ng-options.
<select class="form-control" >
<option value="">--Data--</option>
<option ng-repeat="item in current.lookups.siteReg | filterByIdArray: current.data.sites" value="{{item}}">{{item}}</option>
</select>
Set the "disabled" flag on the options.
Related
I'm working on angularjs and I have a field that has two options YES/NO.
When someone will fill this field I need to show the two options but non of them is selected. So it will look like an empty value, but this empty value should not be an option. I tried to add <option value="?"></option> in the following code, but then the empty value is an option.
Any ideas?
<div class="col-md-3" ng-if="obj.options.length > 0">
<select class="form-control" ng-model="patientReportedSymptomsUI[key]" ng-disabled="$root.newVisit">
<option value="?"></option>
<option ng-repeat="option in obj.options">{{option}}</option>
</select>
</div>
I am using angular 5 and I want to select multiple inputs from the dropdown and store the selected input into an array.
<select multiple class="form-control " name="fea" ngModel size="3" >
<option *ngFor="let feature of features | async" [ngValue]="feature">
{{ feature.name }}
</option>
</select>
Here I am selecting multiple inputs correctly but how can I store selected values in an array?
Any help will be appreciated!
You can change option tag to below.
<option *ngFor="let feature of features | async" [ngValue]="feature" (click)="AddtoArray(feature.name)">
{{ feature.name }}
</option>
In you component,
array:any[]=[];
AddtoArray(feature:any){
this.array.push(feature);
}
You can simply use ngModel to add your selections to your model / array.
Kindly use something like below:-
<select multiple class="form-control " name="fea" ngModel size="3" [(ngModel)]="selectedFeatures">
<option *ngFor="let feature of features" [ngValue]="feature">
{{ feature.name }}
</option>
</select>
For a working solution, have a look at the below stackblitz:-
https://stackblitz.com/edit/angular-hyazbe?file=src%2Fapp%2Fapp.component.html
Don't forget to press shift key to make multiple selections.
PS: I have not used the async pipe in the code but it should work fine with it too.
This can easily be achieved using (change) event as follows:
<select multiple class="form-control " name="fea" [(ngModel)]="model" (change)="valueAdded(model)">
<option *ngFor="let feature of features | async" [ngValue]="feature">
{{ feature.name }}
</option>
</select>
And in .ts file
var **yourArray**:string[]; // define array
valueAdded(val){
**yourArray**.Push(val);
}
This will add the selected options from dropDown in array named as **yourArray**
This seems to be a really straight forward code, but I cannot figure out why it is not working.
I want to filter the 'model' dropdown by selected 'make',
Make:
<select ng-model="makeng" ng-options="option.display for option in makes">
<option ng-disabled="true" ng-selected="true" value="">Select a make</option>
</select>
Model:
<select ng-model="modelng" ng-options="option.display for option in models | filter:{make:makeng}">
<option ng-disabled="true" ng-selected="true" value="">Select a model</option>
</select>
here is the plunker
http://plnkr.co/edit/bHb9AScd2m58acUUyI0t?p=preview
Problem is with your first ngoption, you need to set the model as the value of value property using select as syntax option.value as option..
<select ng-model="makeng"
ng-options="option.value as option.display for option in makes">
Plnkr
I'd like to set the ng-class of a optiones-element as active. Unfortunately it doesn't work.
This is my option-menu:
<select>
<option ng-repeat="item in items">{{item}}</option>
</select>
and the item "one" should be active
<select>
<option ng-repeat="item in items" ng-class="{selected: item=='one'}">
{{item}}
</option>
</select>
It doesn't work. Does anyone know how to set the option tag as active?
An example of how it works is this:
<select>
<option>Blue</option>
<option selected>Green</option>
<option>Red</option>
</select>
Below is the right way "select" works in Angularjs, notice the included ng-model directive, if missing it doesn't work.
<select ng-model="selectedItemId" ng-options="item.id as item.name for item in items">
<option value="">-- choose item--</option>
</select>
to make an item of the list active, just set SelectedItemId variable assigned to ng-model at controller side.
$scope.selectedItemId = 1; //the Id belonging to the option to be selected
I see that you want to loop over the options using ng-repeat and then manually select the right option. It is nicer to use the select directive of Angular in that case:
<select ng-model="selectedItem" ng-options="items"></select>
See https://docs.angularjs.org/api/ng/directive/select for more information.
<select ng-model="item.value" ng-options="item.name for item in items">
</select>
The above will populate select option in AngularJS, but how can I add selected if my condition is met?
I want to do something like this:
<select ng-model="item.value" ng-options="item.name for item in items" if="item.name == someValueToCheckAgainst" selected endif>
</select>
Obviously the above is wrong, but I was trying to search for this to see if it is possible to do.
This is items
var items = [ 'a', 'b', 'c' ];
var someValueToCheckAgainst = 'b';
so my menu should be like this
<select ng-model="item.value">
<option value="a">a</option>
<option value="b" selected>a</option>
<option value="c">a</option>
</select>
Just figured this out
<select ng-model="form.model">
<option ng-selected="{{item == valueToCheckAgainst}}"
ng-repeat="item in items"
value="{{item}}">
{{item}}
</option>
</select>
For me this statement makes no sense.
<select ng-model="item.value" ng-options="item.name for item in items"> </select>
ng-model is current value (bound model). If your 'item' looks like ’{ value, name }' than you should define your 'select' as
<select ng-model="someValueToCheckAgainst" ng-options="item.value as item.name for item in items"> </select>
The selected option is defined by the value of the ng-model attribute. For further information you can take a look at the official documentation https://docs.angularjs.org/api/ng/directive/select.
I recommend to use ng-option directive instead of ng-repeat for select boxes, beacuse ng-option is specifically created for select box and handles options in best way. And how we can set a default or conditional option value selected in ng-option directive is using ng-init directive with it like this:
<select ng-model="item.value"
ng-options="item.name for item in items"
ng-init="condition ? item.value = items[opt index] : item.value = items[0]">
</select>