Question

我使用Ionic Framework和AngularJS，我希望在任务完成时显示特定图标，在未完成任务时显示不同的图标。

我的代码：

<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>

Answer 1

我不确定您希望在代码中发生这种情况，但如果我不得不猜测，您可以更改以下两行：

<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'
  }
}

这可能无法开箱即用，但应该指向正确的方向。

如何使用if语句更改视图中的图标？

1 个答案: