I have two <select> elements:
<select [(ngModel)]="model.SelectedSomeValue">
<option *ngFor="let someValue of model.SomeValues">{{ someValue }}</option>
</select>
<select [(ngModel)]="model.SelectedSomeValue.SelectedOtherValue">
<option *ngFor="let otherValue of model.SelectedSomeValue.OtherValues">{{ otherValue }}</option>
</select>
It seems that you can't bind the second <select> to model.SelectedSomeValue as it never populates correctly. It contains the value, although by specifying [value]="value" one would expect that the object reference is stored but that's not the case. So how can we do a binding between two <select> elements?
If I understand your question, you want one selector to choose a category and a second selector to choose the options within the category? So if you change selector 1, then you would get a different list of items in selector 2?
If so, then check this Plunker: https://embed.plnkr.co/UErCcJeX5ply1BXSjweY/
There was a bug in the beta releases that prevented ngModel from working on some browsers so make sure you upgrade at least to RCs (the plunker is RC5).
Essentially, the code is this:
<p><select [(ngModel)]="selected">
<option value=""></option>
<option *ngFor="let datum of data" [ngValue]="datum">{{datum.name}}</option>
</select>
<p><select [(ngModel)]="selected2">
<option *ngFor="let val of selected?.value" [ngValue]="val">{{val}}</option>
</select>
And the component has a list of objects in data and a place to store the selected values in selected and selected2. The first selector uses data to display options (and stores the object with the subcatagories as the option value) and is bound to the selected variable. The second second selector gets uses the selected.values to create options, and stores the selection in selected2.
Related
I'm developing a web application using Angular 6. I used the library bootstrap-select (by Silvio Mureto) to implement a combo-box (with additional possibilities to customize). I have a problem: when I set the multiple attribute, graphically the behavior is right (all the selected strings appear inside the input box, together). The problem is that the value connected with my ngModel (used to get the data with 2-way binding) it's always only one (and always corresponds to the first value displayed inside the box, although there are other values in it!).
This is the code:
<select
class="form-control selectpicker show-tick"
data-width="200px"
multiple
title="my_title"
name = "name"
[(ngModel)] = "value"
(ngModelChange) = "onChange($event)"
>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="2">Value 3</option>
</select>
This is the result (graphically it's exactly as I would like):
But, as you can see, with each click to add a new value, the value object is always and only associated with 1 (because Value 1 is the first in the list and doesn't seem to matter that the other two values are present).
The console log (object value):
How can I solve this problem?
You change the value attribute of the options?
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
Currently you have 3 option elements all with value="1". So your output is exactly what you told angular to select.
edit: as you edited the question, we probably need to see the onChange method to help understand the problem better
I'm trying to make a dropdown selector with Angular 2. I have an array of items and they all get displayed just fine and the two way data binding works. My only problem is that the dropdown selector has no default value. The selector field is empty when I load the page. The selector is in a edit view of my application, thats why I want to match the default value with the value of the "entityToEdit.cluster.id" object. Can anyone help me out with this?
<select [(ngModel)]="entityToEdit.cluster"
name="clusterSelector">
<option *ngFor="let data of clusterData" [ngValue]= "data">
{{data.id}}
</option>
</select>
Just set the default value on ngOnInit
ngOnInit() {
this.entityToEdit.cluster ="defaultval";
}
Since you plan to show the selected id you should be setting the id as the ngmodel.
<select [(ngModel)]="entityToEdit.cluster['id']"
name="clusterSelector">
<option *ngFor="let data of clusterData" [ngValue]= "data.id">
{{data.id}}
</option>
</select>
I think I may have a unique issue, or at least I cannot seem to find an answer anywhere on the internet. I have a FORM that when a selection is made on a select option above it choose the next select option to show. So basically I have multiple select options with the same name but only one group of select options shows up depending on what I selected on the choice before it. The problem is that when I make a selection to a select option in the first group, the result (value) always shows up as the first option in the last select statement with the same name. Here is a snippet:
<label for="mainIssue" id="mainIssueLabel" class="labelTitle" style="display:none;">Main Issue:</label>
<select name="mainIssue" id="warrantyFiltrationType" style="display:none;">
<option value="Type Filtration">Select One</option>
<option value="CP2000">CP2000</option>
<option value="RX">RX</option>
<option value="SFS">SFS</option>
<option value="SFX">SFX</option>
<option value="RP">RP</option>
<option value="Sand">SAND</option>
</select>
<select name="mainIssue" id="warrantyPumpType" style="display:none;">
<option value="Type Pump">Select One</option>
<option value="F350C">F350C</option>
<option value="F400C">F400C</option>
<option value="F600C-9">F600C GFCI 9</option>
<option value="F600C-18">F600C GFCI 18</option>
<option value="F700800C">F700C/800C</option>
<option value="F1000C">F1000C</option>
<option value="F1500C">F1500C</option>
<option value="F2000C">F2000C</option>
<option value="X600">X600</option>
<option value="X1000">X1000</option>
<option value="X1500">X1500</option>
<option value="CP2000C">CP2000C</option>
</select>
Say the select that comes up is the filtration select options. No matter which option I choose in the filtration selection, the value always shows up as value "Type Pump", or the first option in the last selection with the same name.
It appears that even though the correct selection options are showing, only the last selection option group is being read.
Any clues?
As stated by #David, if your intention is to post the data and you want all select fields with the same name to post the data to the server, then you need to use unique names...
OR...
In the name attribute, you need to append a [] to the end of the name that is the same across multiple selects / inputs.
An example of this which uses your code is as follows
<select name="mainIssue[]" id="warrantyPumpType" style="display:none;">
Note that this will post to the server where mainIssue is an array of each of the datasets.
Note that another small change may be what your looking for..
<select name="mainIssue['warrantyFiltrationType']" id="warrantyFiltrationType" style="display:none;">
and
<select name="mainIssue['warrantyPumpType']" id="warrantyPumpType" style="display:none;">
Note that all I did here was throw your id's into the square brackets to "name those keys". When this is posted to the server, your $_POST data (assuming your using php to capture the post), will be a multi-array where $_POST['mainIssue'] is an array with the key => values your expecting.
-EDIT-
To take this further, you would probably want your "Select One" option's value to be null or empty...
...And on the server, you would simply check for the mainIssue['specificKey'] which has a value that is not empty. With this method, you can then take the single selected value (from which ever select that it was selected in) and store it into the single DB field you need it in.
-EDIT-
An example in php side would be to loop over the array that came in, and simply check.
$mainIssue = ''; // This is what ever you want to default to before checking for the value of mainIssue
foreach($_POST['mainIssue'] as $key => $value) {
if($value != '') { // If the value is empty, then they did not select an item in that specific select field
$mainIssue = $value; // If the value was selected, then there would be a non-empty value somewhere in the multi-dimension array of mainIssue, and here is where we capture it
}
}
// So at this point of the code $mainIssue variable has a value of what ever was selected, else what ever the default was set before the loop above
You would want to make sure your "Select One" option's value attribute is empty for this to work (for all your selects which have the same name)
<select name="mainIssue[]" id="warrantyFiltrationType" style="display:none;">
<option value="">Select One</option>
<option value="CP2000">CP2000</option>
<option value="RX">RX</option>
<option value="SFS">SFS</option>
<option value="SFX">SFX</option>
<option value="RP">RP</option>
<option value="Sand">SAND</option>
</select>
You have multiple form elements with the same name:
<select name="mainIssue"
...
<select name="mainIssue"
When posting a form to the server, the name of any given element is the "key" in its "key/value pair". Thus, it must be unique in that form post. As the browser builds the form post, any element it finds with the same name as a previous element is going to overwrite that one in the form post. (This behavior may be undefined and browser-specific.)
Basically, give your form input elements unique names. You can do this by either:
Having multiple select elements with unique names.
Having a single select element which you dynamically re-populate with options based on user selection.
Is it possible for <select>-lists to reference the same list of options, similar to <input> with <datalist>?
I generate a list of several entries, where (among other things) the user selects a value of a dropdownlist. The options in this list are the same for each entry, so I would prefer it, if the list of options doesn't need to be re-added for each dropdownlist.
I can't use <input> with <datalist>, since the user may only choose from available entries.
you could do this using jquery easily,
<datalist id="mylist">
<option value="a">
<option value="b">
<option value="b">
</datalist>
<select class="someSelect">
<select class="someSelect">
$(".someSelect").html( $("#mylist").html() );
this would replace all your select list from the datalist
This is not realy the good answer. There is a big difference between 'datalist' and 'select' which for as far as I read till yet stays unspoken : in a select the 'value' can be different from the visualized 'innerHTML', which is not the case in a datalist. So what we need is a kind of 'select' with an attribute like 'selectlist="countries' the selectlist then would look like this :
<selectlist>
<option value='1'>Belgium</option>
<option value='2'>France</option>
</selectlist>
and can be reused in more then one 'select' and send the value back to the server instead of the innerHTML.
I have two dropdowns that I populate with data from the server. The first dropdown contains a category, and the second one contains all the subcategories. Like so:
<select ng-model="category1">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
<select ng-model="category1">
<option value="4">Subitem 1</option>
<option value="5">Subitem 2</option>
</select>
Subcategories are linked to main categories by a property "parentID", so in the example above, Subitem 1 could have a parentID = 2, which means Subitem1 has the maincategory of Item 2.
I want the users to be able to select a main category OR a subcategory.
Selecting a main category should filter the second dropdown to only show the subcategories linked to that category (i.e. the subcategories with THAT parentID)
Subcategories can only be selected if a main category has been selected
My question is, how do achieve this filtering in angular? I'm thinking I should use ng-options and angulars filters in some way, but I'm not sure how.
Right now the second dropdowns contains all subcategories regardless of the selected value in the first dropdown. I know I have to use my parentID in the filter to identify which subcategories that should be visible, but where do I put it?
I am still a bit new with AngularJS, so this might not be the best or the most elegant solution, but works for me:
OK, I solved this in a following way:
1) Populated the two select boxes over an ng-repeat command:
<select ng-model="categoryId" ng-change="updateSubcategorySelect()">
<option ng-repeat="category in categoryList" value="{{category.Id}}">
{{category.Name}}
</option>
</select>
<select ng-model="subcategoryId">
<option ng-repeat="subcategory in subcategoryList" value="{{subcategory.Id}}">
{{subcategory.Name}}
</option>
</select>
where the function updateSubcategorySelect is defined in the AngularJS controller and looks like this:
$scope.updateSubcategorySelect= function () {
$scope.subcategoryList= Subcategory.query({
categoryId: $scope.categoryId
});
}
(of course, this assumes you are popuating your list using an API where the factory Subcategory is defined and has a get method that takes categoryId as a parameter, but you can populate / filter your list any other way!)
So, the idea is to call a function on change of the categoryList to reevaluate the data behind the subcategoryList.
I have not worked on disabling the subCategory list if a category is not selected, but it should be something like this (in the definition of the second select box):
<select ng-model="subcategoryId" ng-disabled="countryId === 0 || countryId === undefined">
However, ng-disabled doesn't seem to work well with select boxes, so you might need something like this here:
ng:disabled does not work with select html element
Hope this helps.