Как автоматически выбрать радио-кнопку в карусели в угловых - PullRequest
Новая
       27

Как автоматически выбрать радио-кнопку в карусели в угловых

0 голосов
/ 06 ноября 2019

в моем угловом приложении я использую npm-hm-carousel. Мне нужно автоматически выбрать поле в середине карусели, как на фотографии. Но также мне нужно привязать один из идентификаторов к выбранному элементу, когда я прокручиваю карусель.

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)]. Я думаю, что это потому, что значок радио не щелкает. но когда я использую приведенный ниже фрагмент кода для выбора переключателя вручную, [значение] привязывается к [(ngModel)] 

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

Спасибо!

1 Ответ

1 голос
/ 13 ноября 2019

как я знаю, мы не можем привязать значение к переключателю. Поскольку состояние щелчка не будет изменено в переключателе. Но это хорошо, если вы можете использовать флажок. Вы сможете привязать значения к флажку и определить изменение состояния

...