Изменить значок, выбрав значок из списка

1

Краткое объяснение:

Я поместил 1 значок на home.html и у меня есть список иконок. Я просто хочу заменить значок значком, который я выбираю из списка. Ниже мой код home.html

<ion-item>
<!--Replace below icon by selecting icon from below ion-list -->
        <i class="fa fa-battery-empty" style="color: red;"></i> Battery Level Empty
      </ion-item>

  <ion-list>
    <ion-item>
      <i class="fa fa-battery-empty" style="color: red;"></i> Battery Level Empty
    </ion-item>
    <ion-item>
      <i class="fa fa-battery-1"></i> Battery Level 1
    </ion-item>
    <ion-item>
      <i class="fa fa-battery-2"></i> Battery Level 2
    </ion-item>
    <ion-item>
      <i class="fa fa-battery-3"></i> Battery Level 3
    </ion-item>
    <ion-item>
      <i class="fa fa-battery-4" style="color: green;"></i> Battery Level 4
    </ion-item>
  </ion-list>

Я должен использовать дезинфицирующее средство DOM для некоторых динамических операций HTML, это будет нормально, если для этого нужен способ JS/jQuery на стороне home.ts

Теги:
angular
ionic-framework
ionic3
ionic2

1 ответ

3
Лучший ответ

Сторона компонента:

battery_level = 'empty'

Сторона шаблона:

<ion-item>
    <i class="fa fa-battery-{{battery_level}}" 
    [ngStyle]="{'color': battery_level=='empty' ? 'red' : battery_level=='4' ? 'green' : 'black' }"
    ></i> Battery Level {{battery_level}}
</ion-item>

<ion-list>
    <ion-item (click)='battery_level = "empty"'>
        <i class="fa fa-battery-empty" style="color: red;"></i> Battery Level Empty
    </ion-item>
    <ion-item (click)='battery_level = "1"'>
        <i class="fa fa-battery-1"></i> Battery Level 1
    </ion-item>
    <ion-item (click)='battery_level = "2"'>
        <i class="fa fa-battery-2"></i> Battery Level 2
    </ion-item>
    <ion-item (click)='battery_level = "3"'>
        <i class="fa fa-battery-3"></i> Battery Level 3
    </ion-item>
    <ion-item (click)='battery_level = "4"'>
        <i class="fa fa-battery-4" style="color: green;"></i> Battery Level 4
    </ion-item>
</ion-list>

РАБОЧАЯ ДЕМО

  • 0
    по умолчанию на нем не отображается значок, но когда мы нажимаем, на нем отображается значок, на который нажали, что делать?
  • 0
    @ user2828442, battery_level = 'empty' поместите это в компонент
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню