Question

我目前正在尝试在Angular 6项目中应用引导单选按钮方法。您可以在按钮组中应用按钮的活动状态，然后每次单击另一个按钮时，活动状态都会切换到被单击的按钮。很难用语言来描述，但是这里是引导程序文档（最后一节）：Bootstraps doc

我将此添加到组件视图：

In [12]: def path(p):
    ...:     return attr.ib(make_path_factory(p))

In [13]: @attr.s
    ...: class D(object):
    ...:     root = attr.ib()
    ...:     a = path("a")
    ...:     b = path("b")
    ...:

In [14]: D("/tmp")
Out[14]: D(root='/tmp', a='/tmp/a', b='/tmp/b')

但是通过单击...，活动状态不会在按钮之间切换。也许有人可以帮我解决这个问题：）

Answer 1

复选框的活动状态根据CSS类而变化。在您的情况下，每当用户单击按钮时，都需要更改活动状态。您可以通过使用一个变量为currentButton来实现。

<div class="col-md-3 offset-2">

    <div class="btn-group btn-group-toggle" id="filterCategory" data-toggle="buttons">
      <label class="btn btn-lg btn-outline-success" 
            [ngClass]="{active : currentButton == 'first'}"
            (click) = "currentButton='first'"
             >
        <input type="radio" name="options" autocomplete="off" checked>New
      </label>
      <label class="btn btn-lg btn-outline-success"
             [ngClass]="{active : currentButton == 'second'}"
            (click) = "currentButton='second'"
        >
        <input type="radio" name="options" autocomplete="off">
        <img src="assets/fire.png" width="22" height="auto" alt="bookmarked">
      </label>
      <label class="btn btn-lg btn-outline-success" *ngIf="isVerified"
            [ngClass]="{active : currentButton == 'third'}"
            (click) = "currentButton='third'"
        >
        <input type="radio" name="options" autocomplete="off">
        <img src="assets/bookmark.png" width="22" height="auto" alt="bookmarked">
      </label>
    </div>

  </div>

以ts

public currentButton = "first"; //<-- you can change the default as per your requirement.

Angular 6-Bootstraps单选按钮

1 个答案:

以ts