引導數據切換屬性禁用變化事件 - 角

在我的角模板我有這段代碼：引導數據切換屬性禁用變化事件 - 角

<div class = "btn-group" data-toggle="buttons"> 
    <input type="text" class = "form-control" [(ngModel)]="siteFilter[filterType]" placeholder="Refine Search"> 
    <label class="btn btn-default"> 
     <input type="radio" (change)="changeFilter('1')" autocomplete="off">1 
    </label> 
    <label class="btn btn-default active"> 
     <input type="radio" (change)="changeFilter('2')" autocomplete="off" checked>2 
    </label> 
    <label class="btn btn-default"> 
     <input type="radio" (change)="changeFilter('3')" autocomplete="off">3 
    </label> 
</div>

當我使用data-toggle="buttons"屬性，我的(change)="changeFilter()甚至沒有觸發。如何保持data-toggle功能，並在radio按下時觸發change事件？

來源

2017-08-07 ecain

您可以考慮使用[NG-引導（https://ng-bootstrap.github.io/#/home）（Angular 4 + Bootstrap 4）。 [NgbRadioGroup]（https://ng-bootstrap.github.io/#/components/buttons/api）可以爲您提供您正在尋找的功能。請參閱[代碼示例]（https://ng-bootstrap.github.io/#/components/buttons/examples）。 – ConnorsFan

是的，事後我應該從一開始就使用'ng-bootstrap'，但我寧願現在不必轉換整個應用程序。有沒有一種方法可以使用'ng-bootstrap'而不影響我的Bootstrap 3元素的其餘部分？ – ecain

我對Bootstrap沒有太多的經驗，但我懷疑你可以將Bootstrap 3（CSS + jQuery）與ng-bootstrap（Bootstrap 4 CSS，沒有jQuery）混合使用。混合這兩個可能比轉換爲ng-bootstrap和[升級到Bootstrap 4]（https://v4-alpha.getbootstrap.com/migration/）更復雜。 – ConnorsFan

我最終什麼事做是對我的每一個輸入的標誌變量：

[ngClass]="nameFilterActive ? 'btn btn-default active': 'btn btn-default'

然後在我的組件我有這將取決於按下了哪個更改標誌的功能。到到Click事件綁定在標籤上

來源

2017-08-14 17:23:25 ecain

嘗試（它的工作對我來說）：

<label class="btn btn-default" (click)="changeFilter('1')"> 
    <input type="radio" autocomplete="off">1 
</label>

來源

2017-08-25 17:24:03 deguez07

我相信我試過了。這通常起作用，但它是否適用於'data-toggle =「按鈕」'？ – ecain

是的，我有一些工作，但是我使用bootstrap 4. – deguez07

經過幾個小時的搜索後，這對我很有用。 bootstrap 3.謝謝 –

引導數據切換屬性禁用變化事件 - 角

回答

相關問題