如何使用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语句更改视图中的图标？

回答

相关问题