如何在單擊圖標時在同一div中切換2個圖標

我想實現angular2中的功能，類似於任何郵件加星標時發生的情況。例如： - 當我點擊空白的星形圖標時，通過一些服務電話進行檢查，如果結果爲真，那麼在HTML的同一個div標籤中顯示一個帶有星號圖標的新圖標。如何在單擊圖標時在同一div中切換2個圖標

<div class="star-result" > 
<img src="./images/star_unfilled.png" id="star-result" (click)="isStarred()" alt="Star this result">&nbsp;{{RowName}} 
</div>

有人能上點擊圖標點擊事件即這種切換部分幫助應該改變基於響應？

來源

2017-02-23 user2898158

– user2898158

可以使用NG-展示和NG-隱藏做到這一點

<div data-ng-show=(true)> <img/> </div> 
 
<div data-ng-show=(false)> <img/> </div>

或在您的情況

<div class="star-result" data-ng-click="selected!=selected"> 
 
    <img data-ng-show="selected" src="./images/star_unfilled.png" id="star-result" alt="Star this result"/> 
 
    <img data-ng-hide="selected" src="./images/star_filled.png" id="star-result" alt="Star this result"/> 
 
    {{RowName}} 
 
</div>

來源

2017-02-23 11:44:29 IsuruKusumal

使用屬性用於存儲項目是否已加星標，並綁定到該項目以顯示其中一個或另一個圖像。然後在未加星標圖標的點擊處理程序中使用另一個函數，使請求對其進行加星標並更新屬性。

<img *ngIf="!isStarred" src="./images/star_unfilled.png" id="star-result" (click)="star()" alt="Star this result"> 
<img *ngIf="isStarred" src="./images/star_filled.png" id="star-result" (click)="unstar()" alt="Unstar this result">

並在視圖模型，你有這樣的：

isStarred: boolean = false; 

star() { 
    // Do whatever it takes to star something 
    // And at the end update local status 
    isStarred = true; 
} 

unstar() { 
    // Do whatever it takes to star something 
    // And at the end update local status 
    isStarred = false; 
}

你可以選擇性地還使用單個img元素並綁定取決於isStarred值src屬性。而不是star（）和unstar（）方法使用單一的toggleStar()方法。數十個選項在這裏。

來源

2017-02-23 11:56:02 Matthias247

如何在單擊圖標時在同一div中切換2個圖標

回答

相關問題