Require only one selection from repeated selection field - angularjs

I encountered a problem with this code, so there's a multiple selection field(generated using ng-repeat). My question is, is there a way where I can make the first selection (from the multiple selections) required without affecting the remaining 3 selections?
<div class="col-sm-3">
<select chosen="template.accOptions.laccOptions"
name="{{ 'AccountId' + $index }}"
ng-model="Map.AccountId"
ng-options="Account.id as (Account.name +'('+ glAccount.glCode +')')
for Account in template.accOptions.laccOptions"
class="form-control">
<option value="" ng-disabled="Map.required">
{{'label.menu.selectone' | translate}}
</option>
</select>
</div>

Related

Show a select field with options YES/NO without having a default option selected

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>

Select multiple inputs and store into an array in angular 5

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**

Counting ng-repeat iterations and reaching the value from controller

I want to count how many iterations my ng-repeat did and do something with that value on my controller.
I tried to create a scope variable and increment it on repeat but couldn't get it to work. It just prints "1" next to every dropdown ng-repeat creates.
I tried this so far;
<section class="col col-2" ng-repeat="detailField in cusDetailFields" required>
<select data-smart-select2 id="detailField-{{detailField}}" ng-model="selectedCustomerDetail[detailField]">
<option class="text-align-right"
value="">{{getFieldText(detailField)}} Seçiniz
</option>
<option class="text-align-right"
value="{{detailFieldValue.Value}}"
ng-repeat="detailFieldValue in cusDetail = (customerDetailFilters | filter : { DetailKey : detailField })">
{{detailFieldValue.Value}}
</option>
</select>
{{counter+1}}
</section>
How can I achieve this?

add a Static option with ng-options angularJS

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 ???

angular slow select input

in my controller, is set the two scope variables "otherscope" and "options".
otherscope: {"ID":"1", "VAL1":"X", "VAL2":"Y", ...}
othersope.ID is the value, which should be the selected one. it contains 1 object
options: [{"ID":"1", "TEXT":"Sometext"}, {"ID":"2":"Sometext2"}, ...]
options.ID are the available options to compare with otherscope.ID. it contains about 50 objects.
it works, but it take about 10 seconds to render. is this the correct way to set the selected value?
<label class="item item-input item-select">
<div class="input-label">
Options
</div>
<select ng-model="otherscope.ID">
<option ng-repeat="option in options track by option.ID" value="{{option.ID}}">{{option.TEXT}}</option>
</select>
</label>
change options to option in ng-repeat
<option ng-repeat="options in options track by option.ID" value="{{option.ID}}">{{option.TEXT}}</option>
should be:
<option ng-repeat="option in options track by option.ID" value="{{option.ID}}">{{option.TEXT}}</option>

Resources