I am very new to Angular and a bit overwhelmed.
As far as I understand, I have a component from where I can display data like {{ this }}, which works fine. Now, I want to have a select of that data which is in the component.ts. It is an array of strings:
private strategies: string[] = ["ASAP", "W&T"];
Now, in my component.html, I want to create a select with these strings as options.
<select ngModel="result" ngOptions="value for value in strategies">
</select>
{{ result }}
But the options list is always empty. {{ strategies }} yields ASAP,W&T, which is correct. Even if I use a base example such as:
<select ngModel="result" ngOptions="value for value in ['a', 'b']">
</select>
the options list is completely empty. What am I missing?
You need to use ngFor on options to build the options in angular (v2+):
Also make sure strategies defined in component are public and hence accesible in template.
<select [(ngModel)]="result">
<option *ngFor="let strategy of strategies" [value]="strategy">
{{strategy.name}}
</option>
</select>
Also make sure you use variable name from *ngFor for binding the value and display attribute for options.
ng-options was part of angularJS and is not used in Angular v2+.
AngularJS we use ngOptions directive create the list of element for select but from Angular 2+ and above Angular provide the new structural directive *ngFor which will help to create dynamic list.
And to get selected value from the html Angular provide two way data binding directive called ngModel. To bind two data in Angular 2+ is little bit different like below
Example -
<select [(ngModel)]="result">
<option *ngFor="let strategy of strategies" [value]="strategy">
{{strategy.name}}
</option>
</select>
Hope this help!
Related
I'm developing in Angular.
I'm trying to save part of a JSON in a variable inside a function called in an HTML file:
<select id="postazione" onchange="postazioneSelezionata()">
<option value="" selected disabled >Scegli una postazione</option>
<option *ngFor="let postazione of postazioniNome" value="{{postazione}}">{{postazione}}</option>
</select>
(the onchange="postazioneSelezionata()").
it seems works, because if I try to print the value I'm interested in inside the console.log, it is shown correctly.
postazioneSelezionata(){
this.postazione = document.getElementById("postazione").value;
console.log(this.postazione);
}
inside the function i'm also trying to show this in the terminal:
console.log(this.fileJson.ricette[this.postazione]);
Here comes the problem...
If i try to show the part of the JSON this.fileJson inside the console.log(), it return me an error:
ERROR TypeError: Cannot read property 'ricette' of undefined
at HTMLSelectElement.postazioneSelezionata [as __zone_symbol__ON_PROPERTYchange] .
i've tried to show it in another function (not called from an html onchange event)
this.postazione = "GRIGLIA";
console.log(this.fileJson.ricette[this.postazione])
and it works... this code (called in another function) show me the portion of the fileJson JSON i'm trying to obtain
Possibly this post will be of help.
Additionally, even though you say your onchange works, the standard syntax for such events with Angular, as m.akbari mentioned in his comment, is (change):
<select id="postazione" (change)="postazioneSelezionata()">
...
</select>
And from there, unless you're not particularly bothered about the value of the change and just care to know that something was changed, you would probably pass the value in that changed...
<select id="postazione" onchange="postazioneSelezionata($event.target.value)">
...
</select>
Similar changes, syntax-wise, in your options for entering your value:
<option *ngFor="let postazione of postazioniNome" [value]="postazione">{{postazione}}</option>
Input/output binding, two-way binding, event binding... all are fairly integral to Angular, it's worth getting them figured out.
Again, see the post linked at the top for a more rounded answer and examples to using selects with Angular.
Here I have a dropdown and and mock json contains array of objectr and also children as array.Here when I change the dropdown,specific children/sublink should be display on p tag, by onchange of specific project name.for Ex- if I select Project1 then sublink(Project1a", "Project1b"..) should display in p tag again on change of Project2 sublink(Project2a", "Project2b"..) should display/overwrite again. I tried in angularjs(https://plnkr.co/edit/0ZqtlLsKI5l7my5UpeFS?p=preview) But in angular6 I am not getting how to write ng option.Can anyone please help me,below is my code.
<select [ngModel]="popData">
<option *ngFor="let x of records" >{{x.project_name}}</option>
</select>
<p>{{popData.sublink}}</p>
Its not working
You should use bidirectional binding
[(ngModel)]="popData"
If I am using exact text for comparison in ng-init or ng-selected then it works fine for eg. ng-init="status='OPEN'" but this is not working when I am using loop variable data.status. Any suggestion?
<div ng-repeat="user in filtered = userList | filter:search">
<select ng-selected="{{user.status == item.id}}" ng-options="item.name for item in item track by item.id" ng-model="status" name="status">
</select>
</div>
$scope.item = [
{id: 'OPEN', name: 'OPEN'},
{id: 'RESCHEDULE', name: 'RESCHEDULE'},
{id: 'CANCEL', name: 'CANCEL'},
{id: 'CLOSED', name: 'CLOSED'}
];
It's a little unclear what exactly it is you are trying to do, and I think you may be trying to do a lot in one go when you should break it down more. One things that does stand out is that you are using ng-selected wrong.
Firstly you don't need to wrap the conditional in handlebars {{ }}. (That implies a 2 way binding to a JavaScript object, and makes no sense in this context).
Secondly, the ng-selected directive can't be applied on a select element, only on an option element.
To do what I think you are trying to do (pre-select an option) depends on how you are working. Here are a couple of ways
2 way binding
Remember that the data that you are binding to with ng-model is bound with a 2 way binding which means that the selection will match the underlying data. In this case you shouldn't need to do anything fancy in the template.
<div ng-repeat="user in userList">
<select ng-options="item.name for item in itemList track by item.id" ng-model="user.selectedItem">
</select>
</div>
Instead you just handle it in your controller:
//This shows a static example. Change to whatever is appropriate, probably in a for loop etc
$scope.userList[1].selectedItem = $scope.itemList[1]
ng-repeat inside the select
Alternatively you may want to take the approach of using ng-repeat inside your select element. This then allows you to specify the behaviour more closely on an option by option basis.
<div ng-repeat="user in userList">
<select ng-model="user.selectedItem">
<option ng-repeat="item in itemList" ng-selected="user.status === item.id">
</select>
</div>
(N.b. I have edited some of your variable names for clarity eg. changed 'item' to 'itemList')
I would like to display a collection of selectable objects in an angular 2 application (RC 5, forms 0.3.0)
<select [(ngModel)]="selectedItem">
<option *ngFor="let item of selectableItems"
[value]="item">
{{ item }}
</option>
</select>
<div> {{ selectedItem }} </div>
The list itself is correctly displayed.
But all that is displayed for 'selectedItem' is [object Object]. When accessing the item in code, I get the corresponding string "[object Object]". I tried switching to ngValue but that produces the same results.
The whole thing works when I use primitive values instead of objects. But I suspect that I am missing some crucial point here.
Thanks for your help. I've been wasting several hours on Internet search and trial and error. Maybe somebody has encountered the same problem.
Edit (24-08-16): I came across this tutorial which explains how to create common forms widgets today. Maybe it's useful for somebody who lands on this page: https://scotch.io/tutorials/how-to-deal-with-different-form-controls-in-angular-2
From your code and explanation, I assume "item" is a complex object, and not a simple object. So to display it in HTML you would use:
<div> {{ selectedItem | json }} </div>
In code you have to access the "item" properties (as in item.value or whatever the item's properties are. If you want to work with simple values you can do something like this:
<select [(ngModel)]="selectedItem">
<option *ngFor="let item of selectableItems"
[value]="item.id">
{{ item }}
</option>
</select>
This is of course assuming item is a complex type.
Edit
After some digging (because this has plagued me as well), I found the solution I really wanted! To use complex object you just need to use [ngValue] when binding the value! The fix is described at https://github.com/angular/angular/issues/4843. So the above will look like this:
<select [(ngModel)]="selectedItem">
<option *ngFor="let item of selectableItems"
[ngValue]="item">
{{item}}
</option>
</select>
And then selectedItem will the the correct item from the list, including all it's properties.
I am using Ionic Framework.
I would like to enter the first option as the default, but doing it this way does not work.
What can I do?
<select ng-model="newSpesaAereo.valuta">
<option ng-selected="selected">Euro</option>
<option>Dollaro</option>
<option>Dollaro canadese</option>
<option>Sterlina</option>
</select>
If I analyze the page with Google Chrome Developer Utility I watch this.
If I edit this HTML and I delete the selected row, then Euro is visible.
Why is this happening?
Set ng-selected="true".
Example:
<option ng-selected="true">Carta di credito</option>
The reason the default option isn't working is because, in your controller, you've likely initialised your form model like so:
$scope.newSpesaAereo = {}
If you want to set default form options, you should also set them in the form model. For example, set 'valuta' to 'Euro' like so:
$scope.newSpesaAereo = { valuta: "Euro" }
I hope this helps!
P.S when posting issues like this you should also include the code for the controller that the view is bound to.
You need to use ng-selected instead of just selected.
https://docs.angularjs.org/api/ng/directive/ngSelected
<select ng-model="newSpesaAereo.metodoPagamento">
<option ng-selected="selected">Carta di credito</option>
<option>Bancomat</option>
<option>Contanti</option>
<option>Altro</option>
</select>