Реализовать функцию Multi Select (длительное нажатие / удержание и выбор) в Ionic - PullRequest
Новая
       23

Реализовать функцию Multi Select (длительное нажатие / удержание и выбор) в Ionic

0 голосов
/ 05 мая 2018

Я работаю над проектом Ionic, имеющим список. Мне нужна функция множественного выбора , такая же, как функция удержания и выбора в галерее Android , чтобы при долгом нажатии перед элементами списка появлялись флажки, позволяющие выбрать несколько элементов.

Есть предложения, как это реализовать? Я не ищу функцию GalleryView , а просто долго нажимаю и выбираю функцию, такую ​​же, как она.

Возможно ли это без создания реальных флажков? Или мне нужно создать флажки и реализовать событие удержания?

Примечание: Для тех, кто не понимает, хочу ли я реализовать функцию галереи Android, пожалуйста, обратите внимание! Я не хочу реализовывать функцию галереи Android здесь. Я хочу реализовать функцию MULTI-SELECT в простом списке точно так же, как мы выбираем несколько изображений при длительном нажатии в галерее Android, или даже взять пример выбора нескольких контактов в списке контактов и т. Д.

1 Ответ

0 голосов
/ 02 июля 2018

Попробуйте это - 

<ion-header>
<ion-navbar color="primary">
<ion-title>Notifications</ion-title>
<ion-buttons end *ngIf=selection>
  <button ion-button tappable (click)=disableSelect()>
    <ion-icon name="close" style="zoom:1.5;"></ion-icon>
  </button>
  </ion-buttons>
 </ion-navbar>
</ion-header>

<ion-content padding>
 <div *ngFor="let notification of notifications; let i=index" tappable text-wrap (click)=!selection?toggleGroup(i):selectItem(i,notification)
 (press)=selectItem(i,notification) [ngStyle]="{'background-color': notification.isSelected ? '#f2f2f2' : '#ffffff'}">
 </div>
</ion-content>

А для машинописи 

export class NotificationPage {
notifications: Array<NotificationPojo> = new Array<NotificationPojo>();
selection: boolean = false;

constructor(
public navParams: NavParams,
private alertCtrl: AlertController
 ) {}

 public selectItem(index: number, notification: NotificationPojo) {
// alert ("INsiede item selection");
this.selection = true;
notification.isSelected = notification.isSelected ? false : true;
this.notifications[index] = notification;
}

 public unselectAll() {
this.selection = false;
this.notifications.forEach(notification => {
  notification.isSelected = false;
});
 }
}

Вышеприведенная логика работает так, как будто я взял флаг, который даст мне знать, запущен выбор или нет. Для конкретного элемента выберите Я добавил на страницу элемента переменную, которая будет определять, выбран конкретный элемент или нет. И чтобы показать, выбран элемент или нет, у меня есть пользователь [NgStyle] для элемента press. В Ionic Press означает Нажать и удерживать.

...