How to set dropdown values to null using ng-change angular js? - angularjs

I have one dropdown lets say Drop-down A, based on option selected from that, new dropdowns will be populated. For example,on selection of option 1 from Drop-down A, 2 new dropdowns will be showed. similarly on selection of other options new dropdowns will be populated and other dropdowns will be removed.
Now when I select options from newly populated dropdowns,I can get their value.
Problem comes when I select option 1 from Drop-down A and then select values from newly generated dropdowns, but now I wish to change Drop-down A slection to option 2. Now based on current selection, new dropdowns will be generated.
So if now I post the values, my controller still shows, previous option 1 values.
So how can I change unselected dropdown values to null?
See Plunker

If I understand you problem right, I would prefer to create a function in controller to reset object.
$scope.onChange = function(){
$scope.obj = {};
}
And call it on ng-change
<select ng-model="selectC" ng-change="onChange()" name="subSub" id="main">
Wokring plunker

Related

Dropdown list returning to none and not displaying the selected value after reload

I am filtering my data table with the help of different dropdowns I've created using lightning:select. I am storing the selected value using window.localStorge so that even after reload I can get the selected value in the dropdown and data table is already filtered.
My selected value stays after reload, console.log also shows the correct selected value and it also filters my datatable accordingly but the dropdown value returns to none
enter image description here
I want the selected value to appear in the dropdown and not return to none.

Change event not triggering while updating select option programmatic using selectedIndex in angular 9

I am importing XML content and based on data inside want to update the selected option in the dropdown. Drop Down selection is getting updated but ng-value I have bound is not getting updated automatically. The same thing works when I use UI and update drop-down selection using a mouse click. below is code I am using:
<select [(ngModel)]="mypage.DataList[i].PO" [id]="'objml-'+i" [ngModelOptions]="{standalone: true}" (change)="updateLcso(i, $event)">
<option *ngFor="let x of poList; trackBy:trackByIndex;" [ngValue]="x" >{{x.po_tag}}</option>
So using the above code works fine when using mouse click and change option in the dropdown. and when I read mypage.DataList[i].PO content, data accurately updated.
I want to update the drop-down option programmatically and using the below code.
(document.getElementById("objml-" + index.toString()) as HTMLSelectElement).selectedIndex = 1;
using the above logic, on UI page drop-down option is getting updated but when I read mypage.DataList[i].PO content, data is still not updated
Help is appreciated, Thanks in advance.

How can i dymically populate a list from a value in a dropdown using AngularJS?

I have a dropdown which has values. When I select a value from the dropdown, I need to look up values from the server and then dynamically populate another dropdown and display the second dropdown.
If I select a different value from the first dropdown , I need to once again get values from a server according to that value and popup another dropdownlist with those values. I can keep selecting values from the first dropdown and popup a number of child lists. How can I do this in AngularJS ?

Creating a dependent dropdown menus in react js?

I want to achieve a dependent dropdown list. So when I choose one item on the first dropdown list, the second dropdown values are reflected and based on second's value the third dropdown values are reflected and so on. Like this image
You can use any library like antd for table and for function
you can see
[2]: How to get previous value of <select> in React?. I hope it can help you

Checkbox are getting unchecked if they are of same ng-model AngularJS

i have a scenario.
suppose i do have two pages view 1 and view 2.
and i have three values A,B,C by which i can compare the checkbox on both views.
now on view 1 there is a checkbox with value A,B,C.
and on view 2 there are values "A,B,C" , "A,B,C1" , "A,B,C2".
these values are bind with checkbox on both views.
means on view 1 there is a checkbox with value A,B,C and if we click on button against that checkbox it will show us the multiple values on view 2.
i have put same ng-model for both checkbox lists.
so that if i click on view one then the c on view will be check on view 2 also.
but if i uncheck c valued checkbox on view 2 then the checkbox of view 1 is also unchecked. and user think that nothing is seleted.
i want to show something on that inner values are checked for that checkbox on view 1.
is there any solution to this? i am using ionic, AngularJS
Please help
thank you.

Resources