get data-attribute from option in Angular

Question

I have the following HTML which 2-way binds the option text to the newNumber instance variable.

 <select id="inputState" [(ngModel)]="newNumber" name="newNumber" class="form-control">
    <option data-value-x="192" data-value-y="108" selected="selected"> First</option>
    <option data-value-x="128" data-value-y="72">Second </option>
    <option data-value-x="108" data-value-y="108">Third </option>
    <option data-value-x="72"  data-value-y="72">Forth</option>
 </select>

I would like to access data-value-x and data-value-y for the selected option. This can I do that the Angular way?

JB Nizet · Accepted Answer · 2017-12-17 13:53:25Z

3

Just bind the select to an object containing the values:

    <select name="point" [(ngModel)]="point">
      <option></option>
      <option [ngValue]="{x: 192, y: 108}">First</option>
      <option [ngValue]="{x: 128, y: 72}">Second</option>
    </select>

Demo

Of course, you should define your model in the code, not in the template. This allows selecting the first element of the array of points by default:

points = [
  {name: 'First', value: {x: 192, y: 108}},
  {name: 'Second', value: {x: 128, y: 72}}
];

point: {x: number; y: number;} = this.points[0].value;

And in the template:

    <select name="point" [(ngModel)]="point">
      <option *ngFor="let p of points" [ngValue]="p.value">{{ p.name }}</option>
    </select>

Demo

edited Dec 17, 2017 at 13:53

answered Dec 17, 2017 at 13:12

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sanjihan Over a year ago

Thanks. This works. Unfortunately it does not set the default option visible. Any idea how to make default option displayed. I mean, before you click anything, there should be an option already displayed. At the moment, it is blank.

sanjihan Over a year ago

This indeed works perfectly. But I am even more confused. What I tried was setting pointdirectly point= {x:192, y:108}. This does not make select element display a default value. But if I store the points in an array first, as you did, than it works. Why is that?

JB Nizet Over a year ago

Because, in JavaScript, {x:192, y:108} === {x:192, y:108} is false. The selected point must be the exact same object as on of the options. Not a different object having the same properties.

sanjihan Over a year ago

gotcha. Thanks for your time:)

Collectives™ on Stack Overflow

get data-attribute from option in Angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related