点击从输入类型收音机获取价值

我有一个按钮组，其中我有树型输入类型的收音机。我使用这些的原因是为了获得我为我的项目工作而购买的样式模板，我必须使用完全相同的元素。点击从输入类型收音机获取价值

按钮组是控制上的动态表的大小，以及我需要时的按钮（输入）被按压

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

我使用的事件发射角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>

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

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

否则输入将保持检查状态，因此更改事件不会被触发。如果有人有更好的方式来做到这一点，请分享:)

来源

2016-08-10 methgaard

不完全确定你想达到什么，但如果我理解正确。

您可以使用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)"到输入标签为好。

来源

2016-08-10 09:30:21 Terje

谢谢！这为我解决了它！ – methgaard

我不认为无线电输入目前在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)指令触发模型更改。

来源

2016-08-10 08:02:08 dafyddPrys

点击从输入类型收音机获取价值

回答

相关问题