如何使用if語句更改視圖中的圖標？

我使用Ionic Framework和AngularJS，我想在任務完成時顯示特定的圖標，並且在完成任務時顯示不同的圖標。如何使用if語句更改視圖中的圖標？

我的代碼：

<ion-list> 
    <ion-item ng-repeat="task in tasks" class="item-icon-right" ng-class="{complete: task.completed}" 
      ng-click="task.completed = !task.completed"> 
    <i class="material-icons">check_box_outline_blank</i> 
    <i class="material-icons">check_box</i> 
    {{task.title}} 
    <ion-option-button class="button-assertive delete" ng-click="tasks.splice($index, 1)"><i class="material-icons">delete</i> 
    </ion-option-button> 
    <ion-option-button class="" ng-click="edit(task)"><i class="material-icons">mode_edit</i></ion-option-button> 
    </ion-item> 

</ion-list>

來源

2016-11-29 Lucafraser

我不明白你想要做什麼。但是你可以使用'ng-model =「task.completed」'作爲你的複選框或者'ng-checked =「task.completed」'來根據狀態來選中或取消選中它 – baao

我不知道在你的代碼，你想這樣的事情發生，但如果我有猜測，你可以更改以下兩行：

<i class="material-icons">check_box_outline_blank</i> 
<i class="material-icons">check_box</i>

以下幾點：

<i class="material-icons">{{task.completed ? 'check_box':'check_box_outline_blank'</i>

以上是基本的if語句簡短版，我個人更喜歡把這些陳述放在一個控制器中。因此，而不是把本聲明的看法，我會做到以下幾點：

<i class="material-icons" ng-class="getTaskIcon(task.completed)"></i>

然後在控制器：

$scope.getTaskIcon = function(taskCompleted) { 
    if(taskCompleted == true) { 
    return 'check_box' 
    } else { 
    return 'check_box_outline_blank' 
    } 
}

這可能不起作用開箱即用，但應該指向你正確的方向。

來源

2016-11-29 16:52:31 Dexter

如何使用if語句更改視圖中的圖標？

回答

相關問題