AngularJS: Select options from list, NOT object or arry - javascript

Trying to create a set of select options from a simple list, instead of an array or an object that would have keys. All the docs & examples I find are pertaining to keyed data types.
$scope.numbers = ['tweedle', 'beetle', 'battle'];
Using the code below, the select list renders fine on load.
<select ng-model="fox" ng-options="item for item in fox"></select>
After you make a selection, it splits the selection value into a comma separated list. Try selecting and item, then selecting a different item.
I'm sure it has something to do with the binding, but I can't put my finger on it:
http://jsfiddle.net/LR6DL/1/

It's because you're setting the ng-model of the select to fox. fox is also what your options are set to, so your options array is being over written with the selected value (string) - which then gets split to letters to satisfy the ng-options directive.
Short solution:
Change your ng-model to selection and your input to selection as well.
Demo: http://jsfiddle.net/LR6DL/2/

Related

How to filter data for dropdown options based on previous selected?

I will try to explain shortly. I have this:
I am using AntDesign library with React, and these are not regular inputs, but Autocomplete dropdowns, when i focus on one of them it gives me a list of options to choose. So first i have to choose first dropdown value and after that i will get options in next one to choose, then i choose second and after that i get options for third and so on. So it is something like a chain, you must select all previous dropdowns to be able to get options and select current.
This is what i get from backend.
The normal thing would be that i get values for first dropdown and after i select value i call endpoint again which will return options for second one and so on. But no, i get all possible combination of values in one array, and now i have to filter that one big array each time i select value in one of the dropdowns, to get values for next one, so for the SCOPE for instance, i have to filter array depending on 3 selected previous values and so on for the others.
Last two fields are not important for this problem.
So, i need help how to filter these values in the easiest way. And to use Form.Item and Autocomplete from AntDesign.

Populate Kendo DropDownList with array from selected value

Using javascript I want to populate a dropdownlist (DDL2) with certain data from a REST JSON endpoint based on the selected value of the DDL2.
This DDL2 selected value is triggered by previous DDL1 selection (I have that part working). For example if DDL1 selected value is "Town" then the selected value for DDL2 is: "SELECT towninfo FROM towns ORDER BY towninfo". It's a SQL query, currently. I have the option of replacing it with a comma-delimited array of towns (RALEIGH,CHARLOTTE,ASHEVILLE...), or I could replace it with a JSON string. I'm open for suggestions on that part.
What I want to do is populate DDL2 with the selected array. So when I select "Towns" in DDL1 then DDL2 populates with a list of towns. Thanks!
If you mean something simple as populating a second drop down based on the first one's selection, here is a quick and dirty sample...
http://jsbin.com/AHOpAJA/1/edit
If you want something a bit more complicated, here is another one using three dropdowns, that all bind from a service. http://jsbin.com/ihodoc/3/edit

Qooxdoo ComboBox Label Function

I'm using Qooxdoo 2.0 ComboBox and SelectBox component.
I'm looking for a solution to programmatically define the label of each combo entry.
Something similar to the labelFunction or labelField properties in the Flex ComboBox *(or spark DropDownList) componenent.
Thanks
Davide
I am not quite sure what your looking for but the data binding controller might be the stuff you need. Just check out the following demo [1] which shows a select box bound to an array containing strings. The select boxes can be replaced by combo boxes as well.
[1] http://demo.qooxdoo.org/current/demobrowser/#data~SelectBox.html
I wanted to populate the ComboBox, or SelectBox, with a list ob object with 2 properties, and then set the Combobox to use the first properties as the label and the second one as value.
A the end I used the model property from the the qx.ui.form.ListItem class. to store additional data for each selection.
This is how I populate the ComboBox item.
for(var x in data){
var tempItem = new qx.ui.form.ListItem(data[x]["name"]);
tempItem.model=data[x];
combo.add(tempItem);
}
And this is How I get the additional values from the selection:
combobox.getSelection()[0].model.id
Davide

Manually set default values for a select box using knockout on complex objects

I am trying to update the selected value in one of the select boxes using knockout. But I am not able to do so. Here is the jsfiddle link - http://jsfiddle.net/5MauG/1/
When I click on the click me span, I expect that the selected value in the select box should change.
You're problem is that trying to set the selected option to a new object won't work. Even with the same values, the new object is not the same as the old object. You can see that in this slightly modified fiddle; it works when actually choosing from the objects in the options array.
With an array of values, like strings or ints, you can select by value. With an array of objects, you need to select with the actual object. This will be easier if your view is using the bindings everywhere, because the bindings will represent the actual objects.

Autofocus blank space in dropbox without creating an empty option?

I have a select that has dynamically created option option[0] always ends up being autofocused making my onchange not work if I want to choose the first option.
The index of the options matter so creating a " " option won't work.
Any ideas?
edit: The user creates an object. When the user saves the object, it creates a new option in the select tag. The user selects something from the select tag to go back to that object.
The autofocus is always on option[0] until they selected something else even if they created a new object/option so if they wanted to pick the first thing, but was on the second or third the user would have to click on another option first then click on the one they want.
What I want is that it doesn't focus on any of the options so that they could click on option[0] from the beginning regardless of whether they've selected anything from the dropdown.
Seems like a lot of work to workaround this issue, instead of changing one of your requirements. You say that the index corresponds to an index into an array of objects. Why can't you have the first option blank or "Select...", and then simply subtract one for your lookup into the array?
Or, have the values correspond to the array index, or use custom data attributes to store the array indexes? Seems like any of these would be easier than trying to force a consistent behavior for an unsupported functionality across multiple browsers.
A Select box always has one of its options selected (unless it doesn't have any options). You might need to use a different event (onclick, perhaps) and test the value to see if it has changed.
You can add a default empty selected option with:
<option selected="selected" disabled="disabled" hidden="hidden" value=""></option>
The select is empty by default, with the void option not selectable in the options list.

Categories