Question

我有一个按钮组，其中我有无线电类型的树输入。我使用这些的原因是，为了获得我为项目工作而购买的样式模板，我必须使用完全相同的元素。

按钮组控制动态表的大小，我需要在按下按钮（输入）时触发事件

<div class="btn-group" data-toggle="buttons" (click)="pageSizechanged($event)"  >
    <label class="btn btn-success">
           <input type="radio" name="options"> 10
    </label>
    <label class="btn btn-success">
          <input type="radio" name="options"> 20
    </label>
    <label class="btn btn-success active">
          <input type="radio" > 30
    </label>
</div>

我正在使用Angular 2，所以我试图用值（未显示）绑定输入而没有运气......

更新

下面标记为已解决的答案仅部分解决了我的问题，因为我只能按下每个输入一次。为了解决这个问题，我做了以下几点：

 <div class="btn-group">
    <label class="btn btn-success">
        <input type="radio" style="display:none" value="10" (change)="pageSizechanged($event.target)" > 10
    </label>
    <label class="btn btn-success">
       <input type="radio"  style="display:none"  value="20" (change)="pageSizechanged($event.target)"> 20
    </label>
    <label class="btn btn-success">
        <input type="radio"  value="30" style="display:none" (change)="pageSizechanged($event.target)"> 30
    </label>
</div>

在更改事件中，我传递目标。我这样做是因为我想将check设置为false：

pageSizechanged(target) {
    this._pagesize = target.value;
    target.checked = false;
    ...
}

否则输入将保持检查状态，因此不会触发更改事件。如果有人有更好的方法，请分享：）

Answer 1

我认为目前无法在angular2中支持无线电输入。 (you seem to have to make your own component)

我在（点击）事件中使用了一个简单的事件处理程序，如下所示：

<label class="chart__controls__item" *ngFor="let choice of ['competitor','taxonomy']">
    <input type="radio" 
        name="options" 
        (click)="selectedChoice = choice"
        [checked]="choice === selectedChoice" >
        No
</label>
<label>
    <input type="radio" 
        name="options" 
        [checked]="choice === selectedChoice"
        (click)="selectedChoice = choice > 
        Yes
</label>

因此，如果我们使用selectedChoice='Yes'进行初始化，则会选择第二个单选按钮。 [checked]属性确保选中所选单选按钮，(click)指令触发模型更改。

Answer 2

不完全确定你想要达到的目标，但如果我理解正确的话。

您可以使用ngModel绑定单选按钮，并完全避免当前的单击事件，而是对更改做出反应。以下模板有效，只需在组件类中定义tableSize变量即可。

<div class="btn-group">
    <label class="btn btn-success">
        <input type="radio" name="options" [(ngModel)]="tableSize" value="10"> 10
    </label>
    <label class="btn btn-success">
        <input type="radio" name="options" [(ngModel)]="tableSize" value="20"> 20
    </label>
    <label class="btn btn-success active" >
        <input type="radio" [(ngModel)]="tableSize" value="30"> 30
    </label>
</div>

Current tableSize: {{tableSize}}

如果您需要某个活动，也可以在输入标记中添加(change)="myFunc($event.target.value)"。

点击输入类型无线电获取价值

2 个答案: