I have a multiple select control and I want to be able to prevent the selection of multiple items within a group. Here's the code:
<select multiple="multiple"
data-ng-model="dlgData.selItem"
data-ng-change="itemChange()"
data-ng-options="item.value as item.text group by item.group for item in dlgData.itemList">
</select>
This is a multiple select control so dlgData.selItem will potentially contain an array of selected items.
I want to limit the selection to one item per group, thus, in the change event I want to check to see if the user has added a second item from a previously selected group, i.e. check to see if dlgData.selItem contains values from the same group,
Question: How do I determine the item that caused the change event?
For single select dropdowns I would just check the model but in this case the model (dlgData.selItem) contains all items that have been selected so I don't know which item was the last to be added (which is the one I want to remove).
Initially I was using a Directive - but had the same problem.
Thanks.
Related
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}
/>
As it works now, the multiple search select dropdown allows a user to search for an item contained within the options list, and once selected, removes the option from being able to be selected again. I'd like to be able to keep that option available.
I'd like to keep the options list static when a user clicks on an item in the multiple search select dropdown.
My findings so far:
It appears the options list contained with the event object does not change when a user selects an item from the list.
This is currently not possible. All the selected values are filtered out of the menu options in a multi select Dropdown.
Using ExtJS 6.x. I have the following Fiddle:
bind grouped combo box value to detail displayfield
To start with: I would like to show just a single instance of each item in the combo box instead of the multiple instances that show up for each item (thus, instead of "one" and "two" showing up multiple times, I only want these to appear once in the combo box). Is there a way to do the grouping within the viewModel to achieve this?
Assuming then that the combobox items are now grouped accordingly, I then want to show the details in the displayText area, so that for example, if I choose "one" from the combo box, the detail area would show ALL the ids associated with this, those being '1' and '2'.
I solved this, although it feels a bit kludgey:
First, I created an SQL view with the records grouped together (using a unique key of "name + code")... then, I created another SQL view where "name + code" was another field for the original table.
I then used associations in my models to link these two entities together, and thus, used data bindings to link the record selected in the combobox to a grid.
I have two ui-select in my view. I want to disable some values in second ui-select with respect to first. That means when I change values to first, some of the values in second that are related to selected item in first, would be disabled.
If this is database-driven, is there a field which relates the data so as to be able to dynamically check values (e.g., types > subtypes)? If so, you can use ng-if="" to selectively load select items.
You would need some sort of relationship between the values to be able to programmatically (dynamically) perform the task. Otherwise, you'd have to manually do it.
I have a select menu which has a list of number options.
Rooms is an array which can contain multiple room objects. Each room object contains a number for adults and children.
When a user clicks on a dropdown menu for children or adults how do I do I get the users selected option and parse that to scope function so I can update the rooms.children for that particular room property?
I'm currently using ng-click but that function doesn't even get called.
Plunkr example here
Use ng-model to bind the selected value to a scope property: http://plnkr.co/edit/vfl16rS1XyjhbesqVYDi?p=preview
You can also use ng-options instead of ng-repeat on the options, see: http://docs.angularjs.org/api/ng.directive:select