CODEWITHSUNDEEP
javascripthtmlangular
j-p
j-p

Reputation: 3828

angular2 getting the whole object selected in a select box

In the past I was able to pass out the 'object' that was used for the select options. I'd like to capture that information off a regular select, but I cannot remember how.

So When you do an *ngFor in your select option, you specify a N of N's like this

<option *ngFor="let thing of things" value= {{thing.name}}>
    {{thing.family}} - {{thing.name}}
</option>

I'm hoping I can get that 'whole' thing that was selected, by calling a function on change.

<select class="form-control input-sm " 
        (change)="changeThing($event)" 
        name="thing" 
        formControlName="thing" >

    <option *ngFor="let thing of things" value= {{thing.name}}>
        {{thing.family}} - {{thing.name}}
    </option>

</select>

because I want to change some form options based on the 'family' of the thing, not the value that gets passed.

my function looks like this.

changeThing (thing) {
    console.log('thing:', thing);
    selectedFamily = ??;
}

The $event is probably the wrong thing to be looking at - I can get the value selected there, but I cannot find the whole "thing" that was selected.

Thanks for any help.

Upvotes: 0

Views: 134

Answers (3)

Vivek Doshi
Vivek Doshi

Reputation: 58593

You can do that with the help of index

Template Side :

<select class="form-control input-sm " 
        [(ngModel)]="selectedValue"
        (change)="changeThing($event.target.value)" 
        name="thing" >
    <option *ngFor="let thing of things; let i = index;" [value]="i">
        {{thing.family}} - {{thing.name}}
    </option>
</select>

Component Side :

changeThing(index){
    alert(this.things[index].family +' '+this.things[index].name );
    console.log(this.things[index]);
}

WORKING DEMO

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222682

You can use ngModel with ngModelChange

<select [(ngModel)] ="selectedType" (ngModelChange)="changeThing(selectedType)">
     <option *ngFor="let thing of things" [ngValue]="thing ">
            {{type.name}}
     </option>
</select>

Upvotes: 0

Abdul Qayyum
Abdul Qayyum

Reputation: 1052

I hope it will help

<option *ngFor="let thing of things" value= {{thing}}>
        {{thing.family}} - {{thing.name}}
    </option>

Upvotes: 0

Related Questions