cascading drop-down list in AngularJS - javascript

I have created three dropdown buttons and want to populate them on the basis of selection from previous button.The data is in an object array as below:
[{"LINK":"B_LINK_01","NAME":"name-04","TYPE":"BB"},{"LINK":"A_LINK_01","NAME":"name-01","TYPE":"BB"},{"LINK":"C_LINK_01","NAME":"name-03","TYPE":"AA"},{"LINK":"C_LINK_05","NAME":"name-04","TYPE":"BB"}]
First drop-down should contain all unique TYPE values. When one of the TYPE is selected, the second drop-down should populate with all the unique NAME values corresponding to TYPE. When NAME is selected from second drop-down then the third drop-down should populate with all corresponding LINK values. For ex: The first dd should show BB, AA in the list. if I select BB then second drop-down should populate with name-04 and name-01. Next, if I select name-04 then the third drop-down should populate with B_LINK_01 and C_LINK_05.
P.S. I have referred multiple tutorials and SO threads but did not find a solution relevant to the object array I have. Any help in Angular JS will be appreciated

Related

Vue- How can I control the behavior of chips in v-autocomplete?

I have a 20-25 names coming from API where I'll need to show them in a drop down box (requirement). I'm using Vue v-autocomplete here to display the selected names on the field. I've used custom item called Select All where the user can select all the names in the drop down list, but what I also need to do when the user clicks on Select All is that I don't want to show all the names in the Autocomplete field including Select All Chip. Only items that are selected individually without Select All should show as Chips.
Here is my code sandbox I've attempted so far. I'm new to Vue js, so I'm hoping to get some thoughts on controlling the chips on v-autocomplete.
v-autocomplete sandbox
Instead of including "Select All" in the array of names, you can use the prepend-item slot to include a separate Select All checkbox.
If you need to differentiate between names selected via individual click and those selected via the Select All checkbox you will probably need a new property in the names array to track that, say a boolean that is true if selected one way and false the other.
You'll also need a slot like selection to customize the display of your chips where you can use v-if to conditionally render a chip based on that new boolean property.
This codesandbox I believe is pretty close to what you're after

Dynatable.js - generate select dropdown filter from values in table

I'm currently using dynatable.js to generate a searchable/sortable table from a JSON file. Sorting and searching is working so far. However, as far as I can tell/find, a select dropdown for filtering must have the options manually created in the HTML of the table. I need to instead generate the options for the filter from the specific column.
Example:
The Gender column should be filter able by male and female. This example is fine to add the options directly in HTML as they will be the only options to exist. However, the 'course' column will change over time as courses are added and removed and fed to the table via ajax. The filter options for the column should be generated by the available values in the column.
Is this possible with dynatable as a feature? If not (I can't find it anywhere), how can this select dropdown by generated from the array being used to populate the column.

Change content within a dropdown On Select

I have a page in which the user needs to select a product based on drop down filtering. Consider four drop downs Category--> SubCategory-->Product---> Variant. Its not so user friendly when the user has to select value from each drop down to get the final variant. So I need to select all the values with a subnavigation within a single drop down. You can view what I mean in this link -- http://i.stack.imgur.com/YMoQX.gif
Please tell me how to do this.
I think you can split in three columns and using radio button group in each column to select category or product, filtering in each column

sap.m.select values not selecting correclty

I have a sap.m.inputlistitem with content as sap.m.select.
The list and select are binded to a JSON model.
The list is rendered with select(dropdown) values properly but the problem is......
when I select another element than default value in dropdown/select ,the value is not getting selected ,
ex:
lets say i had a dropdown with 3 values / 3 select options
sapui5
backbone
angualrjs
now, when i select backbone, from dropdown list ,its selected ,but when i want to select sapui5 again its not selected...
any ideas ????
sap.m.inputlistitem should not be a valid aggregation type for items aggregation of sap.m.Select.
UI5 Document for Select
Aggregations
items (default aggregation) : sap.ui.core.Item[]

html select list : chained and filter

I have 2 select option list, they are chained with this method : Chained Select List
I have added an input in order to filter all values in these 2 select with this method: Input Filter Select List
When a user type a word in the input, there are two case :
1/ If the user click on a word in the first list : it will show values possible in the second list
2/ If the user click on a word in the second list : it must show/highlight the 'parent' in the first list..
I don't know how to achieve the second case..
I'm open minded to every solution :)
Thanks,
since you have to do it using javascript..
There are two ways to do this
maintain an array of parents for the options available in the second list. get the values from array using arrday indexes of the select value in the list. use onChange() event on second list and populate the parent in the first list.
for second list, provide the option value to its parent.. i.e. when user selects an option in second list... as value it should return its parent... we will be able to populate the vallue in first list accordingly. please be aware that in this case it is overrding the actual values in second list.

Categories

Resources