javascript - 如何自动选择旋转木马中的单选按钮

标签 javascript angular npm radio-button carousel

在我的 Angular 应用程序中,我使用的是 npm-hm-carousel。我需要像照片中那样自动选择轮播中间的字段。 但当我滚动轮播时,我还需要将其中一个 ID 绑定(bind)到所选项目。

enter image description here

          <ngx-hm-carousel [(ngModel)]="currentIndex" [show-num]="3" [infinite]="infinite" [drag-many]="true"
        [aniTime]="200" [data]="selectedServiceObj.packages" class="carousel c-accent">

        <section ngx-hm-carousel-container class="content">
          <article class="item cursor-pointer" ngx-hm-carousel-item
            *ngFor="let package of selectedServiceObj.packages; let i = index"
            [ngClass]="{'visible': currentIndex===i}">
            <div class="package">
              <div class="well">
                <div class="row header-part">
                  <div class="col-sm-2">

                  <input type="radio" name="package" [value]="package._id" [checked]="i===currentIndex" [(ngModel)]="inputSelectedPackageId" (change)="changed($event)">

                  </div>
                </div>
              </div>
            </div>
          </article>
          <ng-template #infiniteContainer></ng-template>
        </section>

        <ng-template #carouselContent let-package let-i="index">
          <article class="item cursor-pointer" [ngClass]="{'visible': currentIndex===i}">
            </div>
          </article>
        </ng-template>

        <ng-template #carouselPrev>
          <div class="click-area">
            <i class="glyphicon glyphicon-chevron-left" aria-hidden="true"></i>
          </div>
        </ng-template>
        <ng-template #carouselNext>
          <div class="click-area">
            <i class="glyphicon glyphicon-chevron-right" aria-hidden="true"></i>
          </div>
        </ng-template>

        <!-- <ng-template #carouselDot let-item>
          <div class="ball bg-accent" [class.visible]="item.index === item.currentIndex"></div>
        </ng-template> -->

      </ngx-hm-carousel>

但在这种情况下,值不会设置为 [(ngModel)] 指令。我认为这是因为 radio 图标没有点击。但是当我使用下面的代码片段手动选择单选按钮时,[value] 绑定(bind)到 [(ngModel)]

<input type="radio" name="package" [value]="package._id" [checked]="" [(ngModel)]="inputSelectedPackageId">

谢谢!

最佳答案

据我所知,我们无法将值绑定(bind)到单选按钮。由于单击状态不会在单选按钮中更改。但如果你可以使用复选框就好了。您将能够将值绑定(bind)到复选框并识别状态更改

关于javascript - 如何自动选择旋转木马中的单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58736258/

相关文章:

javascript - Angular 4 和 6 之间的区别

node.js - 如何以 root 身份在 Ubuntu Server 上运行 Node Puppeteer 应用程序

mysql - 尝试在 Node 中批量插入用户数组时出现问题

react-native - @react-native-community/netinfo : NativeModule. RNCNetInfo 安装最新版本后为空

javascript - 将 javascript 文件合并到一个文件下

javascript - OpenLayers 中的混合缩放?

javascript - 日期变量函数以 dd/mm/yyyy 格式包含在未来 x 天之前的 Selenium IDE 中

javascript - 如何将变量传递给请求的回调?

http - RxJS Angular2 在 Observable.forkjoin 中处理 404

javascript - 如何在 Angular 2 应用程序中嵌入 javascript 组件?