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**
Related
I have a select menu with using ng-model and a list of values like so:
<select ng-model="$ctrl.ngModel"
id = "{{$ctrl.idPrefix}}-select"
ng-change="$ctrl.change()">
<option ng-repeat="setting in $ctrl.values track by setting[$ctrl.valuePropertyName]"
ng-value="setting[$ctrl.valuePropertyName]">
{{ setting[$ctrl.textPropertyName] }}
</option>
</select>
This all works well when the ng model value is in the list of $ctrl.Values. However, when it isn't I get a default option auto-inserted with a blank text which is displayed. I know I can initialize the properties value to ensure this doesn't happen. However, what I actually want to do is change the display text of this default option to something like "Please select" or similar. Is there a way to set the text which is displayed for this default option?
you can manage this by checking if your array is empty or ngModel is null/undefined
like as sample
<select ng-model="$ctrl.ngModel"
id = "{{$ctrl.idPrefix}}-select"
ng-change="$ctrl.change()">
<option value="" ng-if="$ctrl.values == null || $ctrl.values.length == 0 || $ctrl.ngModel == null"> Please select ... </option>
<option ng-repeat="setting in $ctrl.values track by setting[$ctrl.valuePropertyName]"
ng-value="setting[$ctrl.valuePropertyName]">
{{ setting[$ctrl.textPropertyName] }}
</option>
</select>
i ust use ng-options in a select element in angular js. and in select select i just wants to add a extra options at the beginning of options.my code ===>
<div class="form-group">
<select class="form-control select2" ng-options="(o.fullName+' ('+o.email+')') for o in SubTeamUserList track by o.id" name="SelectedUserList" ng-model="SelectedUserList" multiple data-placeholder="Search By User" style="width: 100%;">
<option value="" disabled>Select A User</option>
</select>
</div>
that is not working for me ? i dont know why.then i search on net and found some solution like =>
angularJS - add a Static option with ng-options
Add two extra options to a select list with ngOptions on it
Angular ng-options - Is there a way to add an option when the model contains a value not present in the options list?
after see above solutions i tried =>
<div class="form-group">
<select class="form-control select2" ng-options="" name="SelectedUserList" ng-model="SelectedUserList" multiple data-placeholder="Search By User" style="width: 100%;">
<option value="" disabled>Select A User</option>
<option ng-repeat="(o.fullName+' ('+o.email+')') for o in SubTeamUserList track by o.id">{{(o.fullName+' ('+o.email+')')}}</option>
</select>
</div>
after doing this this is also showing something like =>
but that is also not working for me i dont know why? can anybody help me ???
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.
When I was using the ngRepeat attribute on options I could filter the labels using myFilter by doing something like this:
<select ng-model="model">
<option ng-repeat="option in myOptions" value="option.id">
{{option.name | myFilter}}
</option>
</select>
Since recently have switched to using the ngOptions directive for displaying options in a select element using Angularjs. So my select element code looks something along the lines of this now:
<select ng-model="model"
ng-options="option.id as option.name for option in myOptions">
</select>
But now I don't know what is Angular's attribute where I can define to filter the labels of the options (if such even exists). So what I want is, using the second code, to run the labels for the options through the myFilter filter.
Here is a working exemple from my code :
<select ng-options="status.displayName | translate for status in vm.admissionstatusSelection">
</select>
Should work for you the same way like this :
<select ng-model="model"
ng-options="option.id as option.name | myFilter for option in myOptions">
you can use filter like this
<select ng-model="create_price" ng-options="obj as (obj | filter) for obj in objectList">
</select>
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.