I have a combo box 2 that updates when the values of another combo box 1 are selected. To do this I used an onChange() function. But when I save my objects and reload the page, only the values of combo box 1 are shown. I think that's because the values of combo box 1 are loaded in the onInit() function, while combo box 2 waits for the onChange() method to be called.
Is there a way to load the stored values on combo box 2 too? Here's my code (only the relevant part, if other code is needed I'll provide it).
view
<div>
<select (change)="onChange($event.target.value)" [ngModel]="model.mycombo1" name="mycombo1" id="mycombo1">
<option disabled hidden [value]="unusedValue">Scegli...</option>
<option *ngFor="let d of combo1" [value]="d.id">{{d.descrizione}}</option>
</select>
</div>
<div>
<select [ngModel]="model.mycombo2" name="mycombo2" id="mycombo2">
<option disabled hidden [value]="unusedValue">Scegli...</option>
<option *ngFor="let d of combo2" [value]="d.id">{{d.descrizione}}</option>
</select>
</div>
component
export class InsertComponent implements OnInit {
combo1: Combo[];
combo2: Combo[];
constructor(private comboSrv: ComboService) { }
ngOnInit() {
this.comboSrv.getCombo1().then(dst => {
this.combo1 = dst;
});
}
onChange(idCombo1: number) {
this.comboSrv.getCombo2(idCombo1).then(dst => {
this.combo2= dst;
});
}
}
I solved it getting my combo2 values in the onInit function too. Otherwise the view doesn't know how to initialise the combo box when the page loads. Hope this tip helps someone.
Related
I'm writing a view currently, and I am wondering if I can save the value that is selected from a dropdown <select> tag in HTML to use in displaying a table later in the code.
I have some JQuery code that saves the selected value to localStorage so that the same value remains selected on refresh. I would like to be able to access this value later in the page for use in displaying a table. Here is some example code.
<select id="edit">
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
</select>
$(function() {
$('#edit').change(function() {
localStorage.setItem('todoData', this.value);
});
if (localStorage.getItem('todoData')) {
$('#edit').val(localStorage.getItem('todoData'));
}
});
#{
foreach (var example in exampleModel)
{
if (example.intProperty == localStorage.todoData) //something like THIS is what I would like to do
{
doSomething();
}
}
}
Could someone please give me a hand with the below issue?
I have got a simple drop down menu with 3 options and would like to remove a "hidden" class (simple CSS with display: none) allocated by default to a div when option 3 (with a value of RU) is chosen but RE-ADD / leave the class when option 1 or 2 are chosen (again).
The HTML for the hidden div is like this :
<div class="hidden" id="cityRestrictions">
<label for="cityQuery">Please select the city you were calling from: </label>
<select id="cityQuery">
<option value="Moscow"> Moscow </option>
<option value="StPetersburg"> Saint Petersburg </option>
<option value="Other"> Other </option>
</select>
</div>
My javascript is as follows:
dialInLocation.addEventListener("change", function() {
let location = document.getElementById('dialInLocation');
if(location.value == "RU") {
removeActivityItem();
}
});
function removeActivityItem() {
cityRestrictions = cityRestrictions.removeAttribute("class");
}
this works fine. If i choose the option with the value RU in the drop down, the class hidden is removed from the div and the content is displayed.
However if i add an
if(location.value == "RU") {
removeActivityItem();
} else {
addActivityItem();
}
with addActivityItem defined as :
function addActivityItem() {
cityRestrictions = cityRestrictions.setAttribute("class","hidden");
}
Then my code is completely broken.
First of all, if cityRestrictions is an element then you don't need to type cityRestrictions = cityRestrictions.setAttribute("class","hidden") because you can just type cityRestrictions.setAttribute("class","hidden");
Second of all, instead of adding the class and taking it away, I recommend changing the style by using cityRestrictions.style.display = "none"; and cityRestrictions.style.display = "block";
I'm developing an Angular 2 app with ASP.NET Core 2.0 using the Visual Studio 2017 ASP.NET Angular Web application template.
I have a controller whose method get returns all the legislations that I'm using in my app (they come from an Enum):
[Route("api/[controller]")]
public class LawController : Controller
{
[HttpGet]
public IEnumerable<Models.LawPresentation> Get()
{
List<LawPresentation> laws = new List<LawPresentation>();
// Arrange
byte[] values = (byte[])Enum.GetValues(typeof(LawTypes));
foreach (byte value in values)
{
string enumName = Enum.GetName(typeof(LawTypes), value);
LawPresentation law = new LawPresentation()
{
Value = value,
Name = enumName
};
laws.Add(law);
}
return laws;
}
}
I this is the component that shows all these values in a select:
<p *ngIf="!laws"><em>Loading...</em></p>
Legislaciones:
<select>
<option *ngFor="let l of laws" [ngValue]="l">{{l.name}}</option>
</select>
I don't think that return the default value (a blank option) from the controller is a good idea, so I wondering if I can add something to the html component to add the default option.
Is there any way to add the default option to the select into the html component?
I would do something like this:
<p *ngIf="!laws"><em>Loading...</em></p>
Legislaciones:
<select>
<option></option>
<option *ngFor="let l of laws" [ngValue]="l">{{l.name}}</option>
</select>
You can add a default option as below.
selected property will make option selected at initial.
disable property will restrict option to be selected by user.
You can remove them as per requirement
<p *ngIf="!laws"><em>Loading...</em></p>
Legislaciones:
<select>
<option value="" selected disabled>SELECT</option>
<option *ngFor="let l of laws" [ngValue]="l">{{l.name}}</option>
</select>
I'm doing an application in Angular. It is a Table one row that contain 2 column. Each column contain one select. They are empty. When the user press a button, a modal window shows up and display a grid with all the items (from json) of the first select. When the user click on one rows and press "Confirm", modal window closes filling the first select. In the meanwhile, the second select fill with the subarray of selected item.
In a few words, there are 2 select: you choose the option on the first (by a modal window) and then you choose the item of its subarray in the second select.
Then, the user can add new rows, repeating the select.
I've tried two ways to do this, and they half work. In the FIRST CODE
you can see that, after clicked on modal window, the first select fill it self (even if it is not the first , I don't know why..). And it doesn't not iterate well, because when you choose a item in new line, it modify all the other choises, and I want to prevent this.
<select ng-model="selectedProduct" ng-options="a as a.nome for a in items" ng-change="selectLot(select1)">
<option value="">-- Select Product --</option>
</select>
<select ng-model="selectedLot" ng-options="a as a.value for a in selectedProduct.lots" ng-change="lotSelect(select2)">
<option value="">-- Select Lot --</option>
</select>
The SECOND CODE works better. It iterate well. It change automatically the second item's selection well. But when I press on the modal window, the first selection doesn't automatically fill with the choosen item.
Can you help me? I can't find a solution..... Thank you so much in advice!
The core of the issue is that if you want to have a form that edits elements in an array, you need to have separate models for each of the rows in the array. You can do this by making "selectedProduct" and "selectedLot" into objects that map the array index to the selected value for that row.
I made an updated plunker with a working example, but without looking at it here is a rundown of the changes you would need to make. You need to change your models so they reference something using the array index of the row, and also pass that index into functions that modify the row:
<button class="btn btn-default" ng-click="open($index)">OPEN!!</button>
<select ng-model="selectedProducts[$index]" ng-options="a as a.nome for a in items" ng-change="selectLot(select1, $index)">
<option value="">-- Select Product --</option>
</select>
<select ng-model="selectedLots[$index]" ng-options="a as a.value for a in selectedProducts[$index].lots" ng-change="lotSelect(select2, $index)">
<option value="">-- Select Lot --</option>
</select>
You also want to update the functions in your controller to work with the array indexes:
$scope.selectLot = function(data, index){
$scope.Subarray = [];
for(i=0; i<$scope.items.length; i++){
if(data == $scope.items[i].id){
$scope.Subarray[$index] = $scope.items[i].lots;
$scope.selectedProducts[$index] = $scope.items[i];
break;
}
}
console.log($scope.Subarray);
}
$scope.lotSelect = function(id, $index) {
for(i=0; i<$scope.Subarray[$index].length; i++){
if(id == $scope.Subarray[$index][i].id){
$scope.selectedLots[$index] = $scope.Subarray[$index][i];
break;
}
}
}
And the modal:
$scope.open = function ($index) {
// ...
modalInstance.result.then(function (selectedItem) {
$scope.selectedProducts[$index] = selectedItem;
}, function () {
$log.info('Finestra selezione prodotto chiusa alle ore: ' + new Date());
});
You probably shouldn't be using a SELECT if you are allowing the choice to happen in a modal popup. All you want to do is show the selected item which you can easily do in a number of different ways. Additionally in the first example prodIsChanged(), which is what sets the subarray, is never called. An easier solution may be something like this:
<div>{{mainProduct}}</div>
<select ng-options="a as a.value for a in selectedProduct"></select>
var myApp = myApp.controller('Cntrl', function ($scope,$watch) {
$scope.mainProduct = '';
$scope.selecedProduct = '';
$watch('mainProduct',function(old,new) {
$scope.selectedProduct = ??? // The mainProduct has changed so set the list of sub products as necessary
};
}
a friend asked me to help him with a form, a client of his wants to make a form a bit more dynamic...my javascript is minimal at best since i just started learning.
He asked me something along the lines of " how can i make a form show another pull down ONLY WHEN a certain option is selected "
in the example he gave me, by default when page loads,he has a pull down menu which has 2 options, MANHATTAN and option two is BROOKLYN.
If Manhattan is chose, that reveals another pull down with zips for manhattan, if Brooklyn is chosen the same for BK.
in sample html, something along the lines like this:
<div>
<form>
<select name="boro" id="boro">
<option value="manhattan" id="manh">Manhattan</option>
<option value="brooklyn" id="brook">Brooklyn</option>
</select>
</form>
<br/>
<div id="empty2fill"></div><!-- for showing chosen results -->
</div>
i want to target/capture the option chosen by the user above on the pull down menu, to then activate this function(below).
according to his request what i guess id do is,(as a newbie), then as far as the .js goes (pseudo code):
<script type="text/javascript">
function valBoro (){
if( brook is chosen){ document.getElementById('empty2fill').innerHTML=" new dropdown code here")
}
}
</script>
aside from not knowing, my main problem is i dont know how to target the option chosen in the menu to thereafter, apply the function (which will be written later)
any ideas, tips etc are greately appreciated.
thanks in advance
Another option is to create the two dropdown lists and set the style display to "none". Then you can catch the onChange event and set display to "" based on the value of the select element.
function showZip() {
var boro = document.getElementById("boro");
if (boro.value == "manhattan") {
var zipManhattan = document.getElementById("zipManhattan");
zipManhattan.style.display = "";
}
}
And in the html
<div>
<select name="boro" id="boro" onchange="javascript:showZip();">
<option value="manhattan" id="manh">Manhattan</option>
<option value="brooklyn" id="brook">Brooklyn</option>
</select>
<br/>
<select name="zipManhattan" id="zipManhattan" style="display:none;">
<option value="zip1" id="zip1">1111</option>
<option value="zip2" id="zip2">2222</option>
</select>
<div id="empty2fill"></div><!-- for showing chosen results -->
</div>
Here is a link to a jsfiddle showing example code.
http://jsfiddle.net/WKqth/
Example markup:
<div>
<form>
<select name="boro" id="boro">
<option value="" id="none">Select a boro.</option>
<option value="manhattan" id="manh">Manhattan</option>
<option value="brooklyn" id="brook">Brooklyn</option>
</select>
</form>
<br/>
<div id="empty2fill"></div><!-- for showing chosen results -->
</div>
Example js
// include this js below the form in the body, or wrap it in a function and assign that to window.onload, or use a library that provides onDomReady (in jQuery, $(document).ready(function () ... });
var selectElement = document.getElementById('boro');
var showBoroSelect = function () {
// find the selected element
var selectedOption = selectElement.options[selectElement.selectedIndex].id,
// find the element that will contain the new drop down
containerElement = document.getElementById('empty2fill'),
// define the html for the manhattan drop down
manhSelectInnerHTML = '<select name="secondary"><option value="derp">manh derp?</option><option value="herp!">manh herp!</option></select>',
// define the html for the brooklyn drown down
brookSelectInnerHTML = '<select name="secondary"><option value="derp">brook derp?</option><option value="herp!">brook herp!</option></select>',
newInnerHTML;
// determine which html to use based on the selection
if (selectedOption === 'manh') {
newInnerHTML = manhSelectInnerHTML;
} else if (selectedOption === 'brook') {
newInnerHTML = brookSelectInnerHTML;
} else {
// no boro was selected, hide the menu
newInnerHTML = '';
}
// set the container to the new innerHTML
containerElement.innerHTML = newInnerHTML;
};
// when the boro select changes, show the new menu
selectElement.onchange = function () {
showBoroSelect();
};
// if you select a boro and reload the page, the boro may already be selected (for example, firefox might do this)
// this will set the boro menu initially before the user changes it
showBoroSelect();
You want to handle the change event of your "boro" select element.
I've put a plain-JS example solution on jsfiddle at http://jsfiddle.net/FHArd/1/
This creates three select lists - one is your "boro" and the other two are the zip code lists, but they are hidden via CSS until a selection is made.
The change event handler simply adds and/or removes classes from the zip code select elements; the CSS hides or shows the lists based on the class "active" that is attached to the zip code select list.
Note - being there in jsfiddle the way you start things up is a little different than normal. You'd really run your setup function at the onload or ondomready event.
This should do it.
<select name="boro" id="boro" onchange="valBoro(this)">
<option value="manhattan" id="manh">Manhattan</option>
<option value="brooklyn" id="brook">Brooklyn</option>
</select>
<script type="text/javascript">
function valBoro(dropDown) {
if (dropDown.options.[dropDown.selectedIndex].value.equals("manhattan")) document.getElementById('empty2fill').innerHTML = "newHTMLCode";
//change "manhattan" to whatever option you want to use
}
</script>