Question

我有以下HTML，它将option文本绑定到newNumber实例变量。

 <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>

我想访问所选选项的data-value-x和data-value-y。我可以这样做Angular方式吗？

Answer 1

只需将select绑定到包含值的对象：

    <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

当然，您应该在代码中定义模型，而不是在模板中定义。这允许默认选择点数组的第一个元素：

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

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

在模板中：

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

Demo

从Angular中的选项中获取data-attribute

1 个答案: