Changing multiple dropdowns option with one dropdown in angularjs - angularjs

I am learning angularjs and stuck at a situation where i want to bind the selected dropdown option to model/controller object. what i am trying to do is, All three dropdowns should show same option which is choosen in App1, later each dropdown can be changed depending on the usecase, want to save the clicks for user.
All three dropdown shows same option by assigning same ng-model as given for App1 dropdown, which works fine but the problem is what if the user changes any/all of the three dropdowns, i want to capture the one with option y and p choosen in an obect/array.
Any help is much appreciated.

Related

How to access click event of option in React dual list box?

I am using react-dual-listbox. Here I am able to select the columns and deselect and use the selected values. But, I want to access the selected option in selected items on click of that particular item.
Ex: if 2 options are selected. If i click on second one, It should give me the value and index of the selected option. I saw something to use selectedRef for that purpose, But I am new to React.
Could anyone please help me out.
<DualListBox
canFilter
preserveSelectOrder
options={this.state.availableColumns}
selected={selectedColumns}
onClick={this.selectedRef}
onChange={this.onColumnSelected}
/>

Angular Formly - HideExpression on page load

I have a number of fields on my form. When the user changes the selected value in a dropdown, there is a hideExpression on each field that shows/hides the fields depending on what the user has selected. This currently works fine.
However, I am trying to make the dropdown default to the first option in the select. This also works fine.
My issue is that all of the hideExpression logic is not being fired upon loading of the screen. So the select is defaulting correctly but none of the fields (that should be shown) that go with that option are visible.
If I manually change the dropdown value then everything is shown correctly. Is there a way to make the hideExpression logic get kicked off even when the select is being defaulted via code?
Here is a JSBin for my issue: http://jsbin.com/doliyiruza/edit?js,console,output
The page defaults to Option2. Yet, there is a hidden field that should show whenever Option2 is selected. So if you change the dropdown to Option1 and then back to Option2...you will see the hidden field. The hide/show logic doesn't seem to get kicked off if you set a dropdown to a certain value by default.
I'm not 100% sure why what you had wasn't working, but querying the DOM in your controller is a very very bad idea. Also, angular-formly intentionally tries to make field IDs non-deterministic so you can't do that (should probably make it more random). Here's what I think you're trying to accomplish: http://jsbin.com/bifaza/edit?js,console,output

Style radio groups differently from each other

I have a form I'm trying to build in Druapal 7, I managed to use theme_radio to style the first group of radio buttons so that they have the class 'visible-xs' on the label to hide the label from anything but phones (as it's displayed in a table heading for desktop). That works fine, but now I have a second group of radios that need the label visible on all devices but I don't know how to make this happen since all of the radios share the same code.
How am I supposed to do this in Drupal?
You can simply use the theme_radio only for a specific form and not for all forms.
If you mean that you have the 2 radio groups inside the same form then I suggest using the theme_radios() function which is most appropriate.
If none of these work for you please provide the code you are using and the html output (of the form).

<select> tag brings up dynamically a different set of input fields depending on selection in AngularJS

Im trying to create a form, first element should be a tag with a few options and each of them will dynamically bring up a different set of forms depending on what the user chooses. The idea is within the select tag there will be different categories like cars, properties etc.. first user only sees that and when chose, it will bring up a set of input fields that required for that category.
Anyone got an idea what would be the best way to do it in angular?
Using the ui.router module, you can populate a DOM element (ui-view) with an HTML template file. On selection of the dropdown, you're telling angular to go to a different "state".
Check out the following plunkr I made: http://plnkr.co/edit/jnKQOvkE4nJinEQ5zhr6?p=preview

Dynamically populate dropdown list from database based on selection in other dropdown lists using dojo

I just want to know how to design the UI with Dojo
I want to populate the dropdowns based on other dropdown selections,and the relationship can be one-to-many, i.e the 2nd dropdown will be populated based on the first one, but then, the 3rd dropdown would be poupulated based on the 1st and the 2nd one and so on.
my requirement is that whenever i select an option in a dropdown, it should be sent to a servlet(running on a given URL) with the selected choice (and any selections made previous to that), so that the servlet could return the data with which to populate the next dropdown
specific Questions
how do i write the code for dropdown form elements (using dojo)
how do i send the data back from the servlet to the webpage so that it will be read by dojo populated in the dropdown
See http://dojotoolkit.org/reference-guide/1.7/dijit/form/FilteringSelect.html#codependent-filteringselect-combobox-widgets

Resources