I have single select using AngularJs ng-options that is working good but my requirement is to make multiselect using AngularJs , How can i achieve that task using ng-options ?
main.html
<div class="row">
<div class="form-group col-md-12 fieldHeight">
<label for="originatingGroup" class="required col-md-4">Originating group:</label>
<div class="col-md-8" disable-control-point="CHALLENGES_EDIT">
<select
class="form-control"
name="OriginatingGrp"
id="OriginatingGrp"
ng-model="challengesDTO.originatingGrpLkupCode"
ng-options="OriginatingGroupOption.id as OriginatingGroupOption.text for OriginatingGroupOption in challengeGroupOptions">
<option value="">
Select...
</option>
</select>
</div>
</div>
</div>
Just add "multiple"
<select multiple
class="form-control"
name="OriginatingGrp"
id="OriginatingGrp"
ng-model="challengesDTO.originatingGrpLkupCode"
ng-options="OriginatingGroupOption.id as OriginatingGroupOption.text for OriginatingGroupOption in challengeGroupOptions">
<option value="">
Select...
</option>
</select>
challengesDTO.originatingGrpLkupCode must and will be an array
Related
whenever I use [(ngModel)] first value becomes empty. but when I remove [(ngModel)] it is working fine.
<select class="custom-select" id="campaignDropdown" [(ngModel)]="campaignInfo" placeholder="Select Campaign" (change)="hitApiFunction(campaignInfo)">
<option value="" disabled selected>Select Campaign</option>
<option *ngFor="let campData of campaigns" [ngValue]="campData">
{{campData.campaign_name}}
</option>
</select>
By #Krishna Rathore
You can use [value]="" selected hidden
I have create a demo on Stackblitz
<form role="form" class="form form-horizontal" (ngSubmit)="onSubmit()" #form="ngForm" ngNativeValidate>
<div class="form-group row">
<div class="col-xl-4 col-lg-6 col-md-12">
<fieldset class="form-group">
<label for="customSelect">Categories:</label>
<select class="custom-select d-block w-100" id="Category" [(ngModel)]="Category" name="Category" required placeholder="d.ff">
<option hidden [value]="" selected>Select one category </option>
<option *ngFor="let item of myBusinessList" [value]="item.id">{{item.name}}</option>
</select>
</fieldset>
</div>
</div>
<button type="submit" class="btn btn-raised btn-danger">Save</button>
</form>
thank you everyone who tried to give an answer... its working fine now, correct ans is....
<select class="custom-select" id="campaignDropdown" [(ngModel)]="campaignInfo" (change)="hitApiFunction(campaignInfo)">
<option [value]="0" disabled selected>Select Campaign</option>
<option *ngFor="let campData of campaigns" [ngValue]="campData">
{{campData.campaign_name}}
</option>
</select>
and in ts file
campaignInfo=0;
Try to assign the campaignInfo variable with the placeholder text in your component.ts file.
e.g
export class CampaignComponent{
campaignInfo : any = "";
}
the reason behind such behavior of the placeholder being empty is you are adding ngModel in your dropdown and it is not assign with any text yet.
It will work for you because you have option tag value attribute as = ' ' for option Select Campaign thats why assign empty string for campaignInfo variable.
Selected attribute is not working for my angular 4 drop down. But its working properly when I remove the name property.(but then another error is occurring)
Please help me .
Here is my component.html code
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="form-group FormComponents">
<select class="form-control" id="employeeType" [(ngModel)]="EmployeeType" name="EmployeeType">
<option selected>Select Employee</option>
<option *ngFor="let nation of Countries" value="{{nation.C_ID}}">{{nation.C_NAME}}</option>
</select>
</div>
</div>
Because Angular behaves differently than your usual HTML.
To select an option in Angular, you have to set the value of your select to the options you want selected. In your case :
<select class="form-control" id="employeeType" [(ngModel)]="EmployeeType" name="EmployeeType">
<option value="">Select Employee</option>
<option *ngFor="let nation of Countries" value="{{nation.C_ID}}">{{nation.C_NAME}}</option>
</select>
In yout components TS :
EmployeeType = '';
Just making sure, are you using a <form>? You do not need the name="employeetype" if you are not using a <form>. The below should work if you are using a <form>, if you are not, then drop the name="employeetype".
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="form-group FormComponents">
<select class="form-control" id="employeeType" [(ngModel)]="EmployeeType" name="employeetype">
<option selected>Select Employee</option>
<option *ngFor="let nation of Countries" [value]="nation.C_ID">{{nation.C_NAME}}</option>
</select>
</div>
</div>
I have a select HTML tag from two options, where I'd like to choose first option by default. In select I use angular directives: ng-change and ng-model. I'm trying to do that with adding selected = "selected" to one of my options. Below I show my html code:
<div class="col-sm-2 form-group">
<select class="form-control" ng-model="surveysFilter.dateKind"
ng-change="setcheckedDateKind(surveysFilter.dateKind)">
<option value="1" selected="selected">Generate</option>
<option value="2">Answer</option>
</select>
</div>
How should I do this? I would be grateful for help ;)
<div class="col-sm-2 form-group">
<select class="form-control" ng-model="surveysFilter.dateKind"
ng-change="setcheckedDateKind(surveysFilter.dateKind)">
<option value="1" ng-selected="true">Generate</option>
<option value="2">Answer</option>
</select>
</div>
Year dropdown isnt showing option 3 or 4-
I want to show the Year drop down according to the course selected.
Here is the code-
<div class="form-group">
<label for="course">Course:</label>
<select class="form-control" id="course" ngModel name="course" #name required>
<option *ngFor="let course of courses" [value]="course">{{course}}</option>
</select>
</div>
<div class="form-group">
<label for="year">Year:</label>
<select class="form-control" id="year" ngModel name="year" required [ngSwitch]="course">
<option>1</option>
<option>2</option>
<option *ngSwitchCase="'MCA'">3</option>
<option *ngSwitchCase="'B. Tech'">4</option>
</select>
</div>
In component.ts the following array is present-
courses = ['B. Tech', 'M. Tech', 'MBA', 'MCA', 'PGDM'];
ngSwitch is working properly, the only thing you need to change is the binding of the variable to ngModel in the first select tag
like : [(ngModel)]="course"
<div class="form-group">
<label for="course">Course:</label>
<select class="form-control" id="course" [(ngModel)]="course" name="course" #name required>
<option *ngFor="let course of courses" [value]="course">{{course}}</option>
</select>
</div>
I want to manage requirement if either of input has any value second of them has to fill like that in angularJS
Please help me what kind of approaches are the best in angular way!
Here is my code
<div class="form-group recipe_item" ng-repeat="recipe in pc.recipes">
<div class="form-group">
<label class="col-sm-4 control-label">Select Product</label>
<div class="col-sm-8" ng-controller="ProductCtrl as pc">
<select class="form-control" ng-model="recipe.partId"
ng-options="item.id as item.name for item in pc.products"
>
<option value="">-- choose product --</option>
</select>
</div>
</div>
<div class="form-group">
<label id="lbl_qty" class="col-sm-4 control-label">Quantity</label>
<div class="col-sm-8">
<input type="number" class="form-control" ng-model="recipe.qty" {{isValidNumber(recipe.partId)}}/>
</div>
</div>
</div>
and my controller
$scope.isValidNumber = (number) =>
return number > 0
you can use ng-required... this is what you need... here is PLUNKER example...
I updated example by adding angularjs form controller and here is form controller documentation for more details...