I have a dropdown list array which is shown in my UI How can I disable all highest elements in array and I want to enable only the lowest value in array
<select class="select-option" name="tier" required [ngModel]="tierDropDown">
<option value="select Tier" selected>Select Tier</option>
<option class="option" *ngFor="let tier of tierList" let i="index" value="{{tier}}" [disabled]="arr">
{{ tier }}
</option>
</select>
.TS file:
tierList = ["Tier1", "Tier2", "Tier3", "Tier4", "Tier5"]
this.arr = [];
let min = this.tierList;
this.arr = min.sort();
this.arr.splice(this.arr[0], 1);
console.log(this.arr);
this.arr.splice(this.arr[0], 1);
console.log(this.arr);
this will return splicing lower element and all higher elements so I am binding that value in [disabled] property in HTML file but the result is all my dropdown values are disabled
You can store the lowest value from array in a local variable and then use for that variable for [disabled] attribute:
HTML Code:
<select class="select-option" name="tier" required [ngModel]="tierDropDown">
<option value="select Tier" selected>Select Tier</option>
<option class="option" *ngFor="let tier of tierList" let i="index" value="{{tier}}" [disabled]="tier != LowestValue">
{{ tier }}
</option>
</select>
TS:
#Component({
selector: 'select-overview-example',
templateUrl: 'select-overview-example.html',
styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
tierList = ["Tier1", "Tier5", "Tier3", "Tier4", "Tier2"]
LowestValue: any;
constructor() {
this.LowestValue = this.tierList.sort()[0];
}
}
Working_Demo
There seems to be a much easier way to do this than the answers provided here. ngFor has exported values that can be aliased to local variables (Source: docs). We can use the first local variable to disable all elements but the first in the dropdown.
As per the docs
first: boolean: True when the item is the first item in the iterable.
With this in mind, we can disable every value that is not the first item in the dropdown using [disabled]="!first"
Here's how your HTML will now look
<select class="select-option" name="tier" required [ngModel]="tierDropDown">
<option value="select Tier" selected>Select Tier</option>
<option class="option" *ngFor="let tier of tierList; let first = first" value="{{tier}}" [disabled]="!first">
{{ tier }}
</option>
</select>
Then in your component just sort tierList.
[disabled] should bind to a boolean. Now you are binding it to an array arr. So it Will always be true. The arr exists. I don’t understand completely what you want to do but if you add en object to your tierList you could calculate an property isDisabled for every element and bind that to the disabled.
Ex: {name:tier1,disabled:true}
You can use the following answer ,
Your html file
<select class="select-option" name="tier" required >
<option value="select Tier" selected>Select Tier</option>
<option class="option" [disabled]="arr" *ngIf="arr">
{{arr}}
</option>
<option class="option" *ngFor="let tier of tierList" let i="index" value="{{tier}}" >
{{ tier }}
</option>
</select>
In .ts file ,
tierList =["Tier1","Tier2","Tier3","Tier4","Tier5"];
arr = [];
let min = this.tierList;
this.arr = min.sort();
this.arr.splice(this.arr[0], 1);
this.arr = this.arr.splice(this.arr[0], 1);
this.arr = this.arr[0]
console.log(this.arr[0]);
console.log(this.tierList);
This answer will work for you.
Related
I have a button which adds more select drop downs when clicked. So I would like to remove the already selected options in these select boxes for preventing duplication.
The following code is used for the select drop down:
<select class="select form-control"
formControlName="environment_id" (change)="onEnvChange($event.target.value)">
<option selected="selected" disabled value="">Select Environment
</option>
<ng-container *ngFor="let environment of environments">
<option *ngIf="!selectedEnvironments.includes(environment.environment_id)"
[value]="environment.environment_id">
{{environment.environment_id}}</option>
</ng-container>
</select>
and in the component I ave the following function for change
public onEnvChange(selectedEnvironment)
{
this.selectedEnvironments.push(selectedEnvironment);
}
Now when I select an option, that option itself gets removed from the dropdown. For example if I have options like option1,option2,option3 etc, when I select option1, option1 is getting removed from the dropdown. How to fix this and remove the option only for the next select dropdown ?
You can try create two objects of environments and listen selection with valueChanges from formControl. After you get the selected environmentid and filter the other object without this id
Example
ngOnInit(){
this.createForm();
this.getEnvironments();
this.environmentChanges()
}
createForm(){
this.form = this.fb.group({
'environment_id_1': [''],
'environment_id_2' : ['']
})}
getEnvironments(){
const environments = [
{ 'environment_id': 1, 'environment': 'A' },
{ 'environment_id': 2, 'environment': 'B' },
{ 'environment_id': 3, 'environment': 'C' },
{ 'environment_id': 4, 'environment': 'D' }];
this.environments1 = environments;
this.environments2 = environments;}
environmentChanges(){
this.form.controls['environment_id_1'].valueChanges
.subscribe((environment_id)=>{
this.environments2 = this.environments1.filter((env)=> env.environment_id != environment_id)
})}
<form [formGroup]="form">
<div class="row">
<select class="select form-control" formControlName="environment_id_1">
<option value="">Select Environment 1 </option>
<option *ngFor="let environment of environments1" [value]="environment.environment_id"> {{environment.environment}} </option>
</select>
</div>
<div class="row" style="padding-top: 10px;">
<select class="select form-control" formControlName="environment_id_2">
<option value="">Select Environment 2 </option>
<option *ngFor="let environment of environments2" [value]="environment.environment_id"> {{environment.environment}} </option>
</select>
</div>
enter image description here
I have a very simple loop through a list of items. And outside of the select dropdown is another loop which can select x number amount of times. The below code would just do that. However, it is not working in IE8/9/11 as [hidden] is not supported. I was wondering if there are alternatives to hide the items that are already selected.
<div *ngFor="let number of numbers; let i = index" >
<select class="roles-select" [(ngModel)]="p[i]" (change)="selected($event)" (blur)="toggleForm($event, 'p', i);">
<option value="Select one" selected>Select one</option>
<option *ngFor="let prod of productList; let x = index"
[ngValue]="prod" [hidden]="p.indexOf(prod) > -1" >{{prod}}</option>
</select>
</div>
There are two ways to achieve what you want.
Using *ngIf
The first is using *ngIf and this is the preferred way. This removes the <option> tag from the DOM entirely.
<div *ngFor="let number of numbers; let i = index" >
<select class="roles-select" [(ngModel)]="p[i]" (change)="selected($event)" (blur)="toggleForm($event, 'p', i);">
<option value="Select one" selected>Select one</option>
<!-- ng-container is now needed because there can only be 1 structural directive per element -->
<ng-container *ngFor="let prod of productList; let x = index">
<option *ngIf="p.indexOf(prod) === -1" [ngValue]="prod">{{prod}}</option>
</ng-container>
</select>
</div>
Using CSS
Alternatively, if you cannot remove the element from the DOM for some reason, you can also use CSS visibility: hidden.
component.html
<div *ngFor="let number of numbers; let i = index" >
<select class="roles-select" [(ngModel)]="p[i]" (change)="selected($event)" (blur)="toggleForm($event, 'p', i);">
<option value="Select one" selected>Select one</option>
<!-- [class.hidden]="" appends the "hidden" css class, when the expression on the right evaluates to true -->
<option *ngFor="let prod of productList; let x = index"
[ngValue]="prod" [class.hidden]="p.indexOf(prod) > -1" >{{prod}}</option>
</select>
</div>
component.css
.hidden {
visibility: hidden;
}
I am not sure if there is any polyfill provided by angular yet.
But this code provides a nice work around to make it work in IE
Use custom attribute [attr.data-hidden] instead of [hidden] and then hide using css.
html
<div *ngFor="let number of numbers; let i = index">
<select class="roles-select" [(ngModel)]="p[i]" (change)="selected($event)" (blur)="toggleForm($event, 'p', i);">
<option value="Select one" selected>Select one</option>
<option *ngFor="let prod of productList; let x = index"
[ngValue]="prod" [attr.data-hidden]="p.indexOf(prod) > -1 ? true: false" >{{prod}}</option>
</select>
</div>
css
[data-hidden="true"]
{
display: none !important
}
In the past I was able to pass out the 'object' that was used for the select options. I'd like to capture that information off a regular select, but I cannot remember how.
So When you do an *ngFor in your select option, you specify a N of N's like this
<option *ngFor="let thing of things" value= {{thing.name}}>
{{thing.family}} - {{thing.name}}
</option>
I'm hoping I can get that 'whole' thing that was selected, by calling a function on change.
<select class="form-control input-sm "
(change)="changeThing($event)"
name="thing"
formControlName="thing" >
<option *ngFor="let thing of things" value= {{thing.name}}>
{{thing.family}} - {{thing.name}}
</option>
</select>
because I want to change some form options based on the 'family' of the thing, not the value that gets passed.
my function looks like this.
changeThing (thing) {
console.log('thing:', thing);
selectedFamily = ??;
}
The $event is probably the wrong thing to be looking at - I can get the value selected there, but I cannot find the whole "thing" that was selected.
Thanks for any help.
You can do that with the help of index
Template Side :
<select class="form-control input-sm "
[(ngModel)]="selectedValue"
(change)="changeThing($event.target.value)"
name="thing" >
<option *ngFor="let thing of things; let i = index;" [value]="i">
{{thing.family}} - {{thing.name}}
</option>
</select>
Component Side :
changeThing(index){
alert(this.things[index].family +' '+this.things[index].name );
console.log(this.things[index]);
}
WORKING DEMO
I hope it will help
<option *ngFor="let thing of things" value= {{thing}}>
{{thing.family}} - {{thing.name}}
</option>
You can use ngModel with ngModelChange
<select [(ngModel)] ="selectedType" (ngModelChange)="changeThing(selectedType)">
<option *ngFor="let thing of things" [ngValue]="thing ">
{{type.name}}
</option>
</select>
I have 2 arrays out of which 1 array values are bound to select dropdown values.
On clearing of another array, I want to render only one option.
Following is the code:
Component
#Component({
selector: 'my-app',
templateUrl : 'app/app.html'
})
export class AppComponent {
arrToClear = [1,2,3,4];
arrToBind = ["NONE", "SOME", "OTHER"];
modelToBind = 'NONE';
}
View
MODEL -> {{modelToBind}}
<button type='button'(click)="arrToClear.length = 0; modelToBind = 'NONE'">Clear Array </button>
<select class="form-control"
id="someId"
name="someName"
[ngModel]="modelToBind"
#someName="ngModel"
>
<ng-container *ngIf="arrToClear.length">
<option *ngFor="let data of arrToBind"
[ngValue]="data"> {{data}}
</option>
</ng-container>
<option value="NONE" *ngIf="!arrToClear.length">
Value
</option>
</select>
Problem is, when I clear "arrToClearArr" array, my selected value is empty. It should get bound to "A" because my model contains "A".
Additionally, I want only one-way binding hence I have used [ngModel].
What am I missing here? Any help will be appreciated.
Thanks.
Plunker Link
Expected behavior:
Change dropdown value
Click 'Clear array' button
Dropdown value should be "A", currently, it is ""
This is optional but personally I would not use the [ngModel] and try using Template-driven forms for this issue as I believe it would be clearer to just bind the variable directly.Just as you did with the for loop.
<select class="form-control" id="someId" formControlName="someName" name="someName">
<ng-container *ngIf="arrToClear.length">
<option *ngFor="let data of arrToBind" [value]="data"> {{data}}</option>
</ng-container>
<option [value]="modelToBind" *ngIf="!arrToClear.length">{{modelToBind}</option>
</select>
Alternatively could you not keep everything the same and just edit the last option.
<select class="form-control" id="someId" [ngModel]="modelToBind" #someName="ngModel" name="someName">
<ng-container *ngIf="arrToClear.length">
<option *ngFor="let data of arrToBind" [ngValue]="data"> {{data}}</option>
</ng-container>
<option [value]="modelToBind" *ngIf="!arrToClear.length">{{modelToBind}</option>
</select>
I have an html that look like this
<select class="form-control"
name="settings.provider"
id="settings.provider"
ng-model="settings.provider"
required>
<option value="" disabled selected>Select Provider</option>
<option value="thisProvider">thisProvider</option>
</select>
How will I programmatically select "thisProvider" as the selected option?
I tried this but it isn't working:
$scope.settings.provider = "thisProvider";
If your options are not bound with an ng-repeat, you can bind each option to setting in your controller using ng-selected (https://docs.angularjs.org/api/ng/directive/ngSelected). In your controller, you create a boolean like $scope.thisProviderSelected for each option, then set it to true for the option you want selected.
<select class="form-control" name="settings.provider" id="settings.provider"
ng-model="settings.provider" required>
<option value="" disabled selected>Select Provider</option>
<option value="thisProvider" ng-selected="thisProviderSelected">thisProvider</option>
</select>
A better way would probably be use ng-repeat and to add an isSelected to each item in the list. That way if your list changes, you would automatically get any new items.
document.getElementById('settings.provider').value = 'thisProvider';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select class="form-control"
name="settings.provider"
id="settings.provider"
ng-model="settings.provider"
required>
<option value="" disabled>Select Provider</option>
<option value="thisProvider">thisProvider</option>
</select>
Solution 1:
Create Event:
change
JavaScript Function:
function selectItemByValue(elmnt, value){
for(var i=0; i < elmnt.options.length; i++)
{
if(elmnt.options[i].value === value) {
elmnt.selectedIndex = i;
break;
}
}
}
Break out of your loop, once you have found the selected value.
Solution 2:
var Person_ID = 2;
change