Question

New to ionic 2, Looking for implementing multi select check box feature on top of ion-list >> ion-item >> avatar image. Meaning, in a contact list , user should be able to press and hold and select multiple contacts from that list. any css built-in or custom approach to change avatar image to avatar image with check box and select?

(Please let me know if this is not clear, thanks)

Answer 1

最好的方法可能是没有复选框（或用css伪装）然后在你的组件中创建一个selectedList，它将跟踪点击哪些头像（假设他们有一个{{1}作为标识符）。

HTML：

id

TS：

<ion-header>
  <ion-navbar primary>
    <ion-title>
      Ionic 2
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="has-header">
  <ion-list>
   <ion-item *ngFor="let contact of contactList">
      <ion-avatar (click)="clickedAvatar(contact.id)"
         [class]="isInArray(contact.id) ? 'selected' : 'not-selected'"
            item-left>
            <img src="https://pickaface.net/assets/images/slides/slide2.png"/> <!-- get image from contact object --> 
        </ion-avatar>
        <h2>{{contact.name}}</h2> <!-- etc -->
   </ion-item>
</ion-list> 
</ion-content>

CSS

import { Component } from '@angular/core';


@Component({
  templateUrl:"page1.html"
})
export class Page1{
  contactList: any[];

  selectedContacts: any[];

    constructor(){
       this.selectedContacts = [];
       this.contactList = [{
    id: 1,
    name: "Steve"
  },
  {
    id: 2,
    name: "Mark"
  },
  {
    id: 3,
    name: "Lauren"
  }];
    }

    clickedAvatar(id: number){

      console.log(this.selectedContacts);
       if(this.isInArray(id)){
         let index = this.selectedContacts.indexOf(id);

         this.selectedContacts.splice(index,1);
       }else{
          this.selectedContacts.push(id);
          console.log(this.selectedContacts.indexOf(id));
       }
    }

    isInArray(id: number): boolean{
      let check: boolean = false;
      for(let contactId of this.selectedContacts){
         if(contactId == id){ 
           check = true;
         }
      }
      return check;
    }
}

（点击）事件将在点按和长按时执行。如果您只想点击或实际按住，则应将.selected img{ opacity: 0.4; }更改为(click)或(press)。

（从内存写这个可能是不正确的类名或某个地方错字:)）。（我会尝试创建一个plunkr）

Change multiple item images when pressed

1 个答案: