更改列表中選定區域的顏色？

如何更改從購物車中選擇的顏色？更改列表中選定區域的顏色？

<ion-item *ngFor="let list of urunListesi; let i = index;" > 
    <ion-thumbnail item-start> 
     <img class="urunListeGorsel" 
       [src]="list.DEFAULTRESIM ? 
        'http://pexsssd.com/assets/urungorsel/'+list.DEFAULTRESIM : 
        'http://www.djxxxldl.com/assets/image.png'" 
       (load)="onImageLoad($event)" /> 
    </ion-thumbnail> 
    <h2 class="urunListeYazi1" 
     (tap)="urunDetay(list.ID, 
         list.STOKNO, 
         list.BIRIM, 
         list.STOKADI, 
         list.FIYAT, 
         list.DEFAULTRESIM, 
         list.BARKOD, 
         list.ONCEKIFIYAT)"> 

     <img [hidden]="!list.KAMPANYAID" class="indirimEtiketi" 
       src="assets/indirim52.png"> 
       {{ list.STOKADI }} 
    </h2> 
    <p class="urunListeYazi"> 
     <span (tap)="urunDetay(list.ID, 
           list.STOKNO, 
           list.BIRIM, 
           list.STOKADI, 
           list.FIYAT, 
           list.DEFAULTRESIM, 
           list.BARKOD, 
           list.ONCEKIFIYAT)" 
       class="fiyat" 
       [style.font-weight]="'bold'" 
       [style.color]="list.KAMPANYAID > 0 ? 'green' : 'black'"> 
        {{ urunFiyatKisalt(list.FIYAT) }} ₺ 
     </span> 
      &nbsp; 
     <del (tap)="urunDetay(list.ID, 
           list.STOKNO, 
           list.BIRIM, 
           list.STOKADI, 
           list.FIYAT, 
           list.DEFAULTRESIM, 
           list.BARKOD, list.ONCEKIFIYAT)" 
       [style.font-weight]="'bold'" 
       [hidden]="!list.KAMPANYAID"> 
      {{ urunFiyatKisalt(list.ONCEKIFIYAT) }}&nbsp; 
     </del> 
     <span [style.font-weigth]="'bold'" [hidden]="!list.KAMPANYAID">₺</span> 
     <ion-icon (tap)="sepetEkle(i, list.STOKNO)" 
        [class.sepeteEklenmis]="sepetEkleDeger" 
        class="urunListesiSepeteEkle" 
        ios="ios-cart" 
        md="md-cart"> 
     </ion-icon> 
    </p> 
    <h3 [hidden]="!list.KAMPANYAID" 
     class="kampanyaliUrunlerBitisTarihi"> 
       <ion-icon name="ios-alarm-outline"></ion-icon> 
     {{ ngOnInit(list.BITISTARIHI)}} 
    </h3> 

    </ion-item>

來源

2017-08-28 Can Kurucu

好你的代碼是很煩人的閱讀，一半是因爲它在不同的語言。你可以做的是保留已經選擇的項目列表，並創建一個函數來檢查項目是否在列表中。然後你可以添加''並添加css：'.selected .item-inner {background-color：light-綠色; }' – Ivaro18

「一半，因爲它是在不同的語言」..大聲笑 – 2017-08-29 10:22:26

你應該考慮只是將'list'傳遞給組件中的方法並過濾你需要的內容，而不是在視圖中傳遞每個屬性。 – 2017-08-29 10:31:07

Home.ts

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 
    private names = [ 
    { name: 'John', selected:false}, 
    { name : 'Paul', selected:false}, 
    { name : 'Ringo', selected:false}, 
    { name: 'George', selected:false} 
    ]; 

    constructor(public navCtrl: NavController) { 

    } 
    select(selectedName):void { 
    this.names.forEach((n) => { 
     if (n.name === selectedName.name) { 
     n.selected = !n.selected; 
     } 
    }); 
    } 

    getBgColor(name):string { 
    return (name.selected) ? 'yellow' : ''; 
    } 
}

Home.html中

<ion-list> 
    <ion-item *ngFor="let name of names" 
      [style.background-color]="getBgColor(name)" 
      (click)="select(name)"> 
    {{name.name}} 
    </ion-item> 
</ion-list>

來源

2017-08-28 18:06:01 JGFMK

你需要選擇的時候加個班，然後再取消時刪除類。那麼你可以應用一個CSS來選擇項目。像

.selected{background-color:pink;}

來源

2017-08-28 16:49:41

更改列表中選定區域的顏色？

回答

相關問題