currently i'm working on a angular project and i'm facing some issue in creating multiple select dropdown with dynamic data.
I want the to acheive something like this. There will be one button which when clicked will add multiple select dropdown in the form and that select dropdown will have dynamic data fetched from api.
The above thing is already acheived but the problem that i'm facing is that all the dynamic select dropdown had same ng-model and same name, so when i'm selecting value for one select dropdown, the same value is getting selected for all the dynamic select dropdown.
Attaching the screenshot for referrence
Now when i select any single dropdown, all the value for other dropdown are getting selected as well.
I hope i'm able to explain as much as possbile.
The code i used to add multiple dropdown
<div class="pull-right"><button (click)="addNewRow()" class='btn btn-success'>Add New Subjects</button></div>
This html is added dynamically in the form
<div class="row" *ngFor="let ts of total_subjects; let i=index">
<div class="col-4">
<div class="mb-3">
<label class="form-label" for="Status">Select Subject</label>
<select class="form-select digits" id="subject_id" name="subject_id" [(ngModel)]="form.subject_id"
required
#subject_id="ngModel" (change)="getChapter(subject_id.value)">
<option value="">Select Subject</option>
<option *ngFor="let sub of subjectList" value="{{sub.subject_id}}">{{sub.name}}</option>
</select>
</div>
</div>
<div class="col-4">
<div class="mb-3">
<label class="form-label" for="Status">Select Chapters</label>
<select class="form-select digits" id="chapter_id" name="chapter_id" [(ngModel)]="form.chapter_id"
required
#chapter_id="ngModel" >
<option value="">Select Chapter</option>
<option *ngFor="let chap of chapterList" value="{{chap.subject_id}}">{{chap.name}}</option>
</select>
</div>
</div>
<div class="col-3">
<div class="mb-3">
<label class="form-label" for="questions">No of Questions</label>
<input class="form-control" id="questions" type="number" name="questions" [(ngModel)]="form.questions"
required
#questions="ngModel" />
</div>
</div>
<div class="col-1"><button (click)="removeRow(i)" class='btn btn-danger'>Remove</button></div>
</div>
Here is the component code i used
total_subjects:any = [{
subject:'',
chapter:'',
questions:''
}];
addNewRow(): void{
this.total_subjects.push({
subject:'',
chapter:'',
questions:''
});
}
I don't really like to work with ngmodel when it is something complex, but in any case, I would try to give them in runtime a different name to each row, based on the index.
If you had left a StackBlitz with your current code worling, I would have tried to change it in your code to prove that it works, but more or less it consists of something like this:
<div class="row" *ngFor="let ts of total_subjects; let i=index">
<div class="col-4 mb-3">
<label class="form-label" for="Status">Select Subject</label>
<select
class="form-select digits"
id="subject_id_{{i}}"
name="subject_id_{{i}}"
[(ngModel)]=`form.subject_id_${i}`
required
#subject_id_{{i}}="ngModel"
(change)=`getChapter(subject_id_${i}.value)`>
<option value="">Select Subject</option>
<option *ngFor="let sub of subjectList,let i2 as index" value="{{`sub.subject_id_${i2}}">{{sub.name}}</option>
</select>
</div>
Note that you will have to play with the sintaxis {{ index}} and ${index} (backtips), depending on the case...
I hope this idea helps you.
Related
the foundation of my code is that I am taking data from ag-grid and showing that data into select drop-down (inside a popup) when "Edit" button is clicked.
But the data is not showing in the select drop-down.
When I click Edit, "YES" or "NO" should show as already selected in the drop-down based on the data I get from the grid. The code I used is mentioned below:-
<!-- Alter Part -->
<div class="form-group row">
<label for="alter_part" class="col-sm-3 col-form-label">Alter Part</label>
<div class="col-sm-9">
<select id="alter_part" class="form-control" onchange="alternatefunc();" required>
<option value="1">YES</option>
<option value="0">NO</option>
</select>
</div>
</div>
<!-- Test Type -->
<div class="form-group row">
<label for="test_type" class="col-sm-3 col-form-label">Select Test Type</label>
<div class="col-sm-9">
<select id="test_type" class="form-control" required>
<option value="1">YES</option>
<option value="0">NO</option>
</select>
</div>
</div>
function getInitialData(params)
{
//Setting value using grid data
document.getElementById('alter_part').value = params.node.data[params.columnApi.getAllGridColumns()[3].colId];
document.getElementById('test_type').value = params.node.data[params.columnApi.getAllGridColumns()[7].colId];
}
I have verified that the select drop-down stores the value from grid,
var a = document.getElementById('test_type').value;
variable "a" here returns the correct value of the grid row.
In my angular application I have a dropdown list and below that some data is in div.
component.html
<select class="form-control" id="power" required>
<option value="" disabled selected>Select a category</option>
<option *ngFor="let category of categoryNames">{{ category }}</option>
</select>
<!--below code I have to show or hide-->
<div class="row">
<div class="col-sm-8">
<p>Slect Habits</p>
<h5 class="formxp">Slect Items</h5>
</div>
<div class="col-sm-4">
<p>Slect Habits</p>
<h5 class="formxp">Slect Items</h5>
</div>
</div>
So my requirement is when I click on any of the items from the dropdown list I have to show the div (after the dropdown in above code)
Can anyone help me regarding the same.
You can define a template variable (e.g. #mySelect) on the <select> element, then use it to determine the selected value: mySelect.value.
In case you need to display the div if the selected category equals to 'Habit', you can try the following:
<!-- #mySelect is declared on <select> element -->
<select class="form-control" id="power" required #mySelect>
<option value="" disabled selected>Select a category</option>
<option *ngFor="let category of categoryNames">{{ category }}</option>
</select>
<div class="row" *ngIf="mySelect.value === 'Habits'">
<div class="col-sm-8">
<p>Slect Habits</p>
<h5 class="formxp">Slect Items</h5>
</div>
<div class="col-sm-4">
<p>Slect Habits</p>
<h5 class="formxp">Slect Items</h5>
</div>
</div>
You can read more about the Angular Template Variable here:
https://angular.io/guide/template-reference-variables
I'm trying to filter dropdown based on selection of first dropdown, in my console log, everything is fine, but second dropdown allways showing all results, not filtered one, here is how I did it:
<!--Group-->
<div class="form-group">
<label class="control-label dash-control-label col-xs-3">GROUP:</label>
<div class="col-xs-9">
<select class="form-control" style="width: 100%;"
data-minimum-results-for-search="Infinity" name="articleGroups" required (change)="filterSubById(article.mainGroup.id)" [(ngModel)]="article.mainGroup">
<option disabled [ngValue]="null">-/-</option>
<option [ngValue]="group" *ngFor="let group of mainGroups">{{group.title}}</option>
</select>
</div>
</div>
<!--Subgroup-->
<div class="form-group">
<label class="control-label dash-control-label col-xs-3">SUBGROUP:</label>
<div class="col-xs-9">
<select class="form-control" style="width: 100%;" name="subGroup" required [(ngModel)]="article.subGroup">
<option disabled [ngValue]="null">-/-</option>
<option [ngValue]="subgroup" *ngFor="let subgroup of subGroups">{{subgroup.title}}</option>
</select>
</div>
</div>
You need to pass the outcome of the filterBySubId method back to the view. You're not doing anything with the returned value.
I'd do something like this:
filterSubById(Id) {
this.filteredSubGroups = this.subGroups.filter(item => item.parentId == Id);
}
and in view
<option [ngValue]="subgroup"
*ngFor="let subgroup of filteredSubGroups">{{subgroup.title}}</option>
I'm trying to develop an example of filter items by category. Following block of code shows list of item by category filter.
<div class="form-group">
<label class="control-label" for="order_id">Filter by Category</label>
<select class="form-control m-b" name="category" ng-model="item.searchString">
<option value="">All</option>
<option ng-repeat="category in item.itemscategory" value="{{category.name}}">{{category.name}}</option>
</select>
</div>
<div class="chat-user" ng-repeat="iteme in item.items | filter:item.filterSearch"
ng-class="{'text-navy':$first == true}">
<a id="{{iteme.id}}"
href="" ng-click="item.selectitem(iteme)">{{iteme.name}}</a>
</div>
If I select any item in the list and change category to filter them I want by default that item will selected if present in list or select first item in the list.
In Js you can set:
$scope.firstItemInTheList= item.itemscategory[0];
To save the first item, also set it to ng-model of select tag.
<div class="form-group">
<label class="control-label" for="order_id">Filter by Category</label>
<select class="form-control m-b" name="category" ng-model="firstItemInTheList">
<option value="">All</option>
<option ng-repeat="category in item.itemscategory" value="{{category.name}}">{{category.name}}</option>
</select>
</div>
<div class="chat-user" ng-repeat="iteme in item.items | filter:firstItemInTheList"
ng-class="{'text-navy':$first == true}">
<a id="{{iteme.id}}" href="" ng-click="item.selectitem(iteme)">{{iteme.name}}</a>
</div>
If you are not choose any option from the select, the filter using this
$scope.firstItemInTheList= item.itemscategory[0];
to filter.
How do I use ng-hide based on the previous select dropdown? I would like to show #additional-option if option C is selected in the dropdown.
<div class="form-group">
<label class="control-label col-md-3">Option:
<span class="required">
*
</span>
</label>
<div class="col-md-4">
<select class="form-control">
<option selected>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</div>
</div>
<!-- Show the below only if C is selected -->
<div class="form-group" id="additional-option">
<label class="control-label col-md-3"></label>
<div class="col-md-4">
<label>
<div class="checker">
<span>
<input type="checkbox">
</span>
</div>
Additional option
</label>
</div>
</div>
You bind the view controls to scope items and check the values in other bindings. So in your case you can bind your first select to scope as below.
ng-model="formData.selectedLetter"
Then you can use ng-show in the next control to check the value for the previous select control.
ng-show="formData.selectedLetter === 'C'"
You could also use ng-hide if you must, by reversing the condition expression.
This will ensure that the second control is only visible if the formData.selectedLetter is 'C'.
You simply need to setup a two-way binding on your element like so
<select class="form-control" ng-model="selectedOption">
and use that value in the ng-show directive for the div that needs to be hidden, like so
<div ng-show="selectedOption === 'C'" class="form-group" id="additional-option">
here's the plunker - http://plnkr.co/edit/XsXs4uhNTB6cKAL4IM5f?p=preview