Dynamic alert in ionic 2 list item

Ionic Framework ionic-v3
1

In my html page, i’am populating a list of services. In each list item i have a button item, and that button onclick a dynamic radio alert box will come from ts. when i select an option from that alert, the selected value is reflecting in all list items. I want that value should reflect only in clicked item. How i handle this situation. please help me out.

My HTML code
<ion-list class=“custom-bg” *ngFor=“let item of cartList; let i=index; trackBy:indexTracker”>

<ion-item margin-top class="accord_item"  text-wrap (click)="toggleGroup(i)" [ngClass]="{active: isGroupShown(i)}">
  <h2><strong text-uppercase>{{item.service_name}}</strong></h2>
  <ion-icon class="arrow" item-start [name]="isGroupShown(i) ? 'ios-arrow-down' : 'ios-arrow-forward'"></ion-icon>
  <ion-icon name="close" item-end (click)="removeItemFromCart(item)"></ion-icon>
</ion-item> 
  
	<ion-item *ngIf="isGroupShown(i)">
		<ion-card-content class="no-left-right-padding">
		<ion-row>
			<ion-col col-6>
				<ion-icon name="card" end (click)="removeItemFromCart(item)"></ion-icon>
				<span margin-left class="service-item">{{item.cost}} BD</span>
			</ion-col>
			<ion-col col-6>
				<ion-icon name="clock" end (click)="removeItemFromCart(item)"></ion-icon>
				<span margin-left class="service-price">{{item.time | number: '1.0-0'}} Mins</span>
			</ion-col>
		</ion-row>
		<ion-row>				
		</ion-row>

	<button ion-item  no-lines  margin-top button color="light" (click)="select_emplyee(i)"> {{employee_data||'Select Employee'}}<ion-icon item-end name="people"></ion-icon></button>

	</ion-card-content>
  </ion-item>
  
</ion-list>

My .TS code

select_emplyee(index){

console.log(index);

              let loader1 = this.loadingController.create({
                 spinner: 'dots',
                 content: 'Please wait...',
               });            

              loader1.present().then(() => {
              this.httpservice.load_single_saloons_employe(this.navParams.get('provider_id')).subscribe(
              data => {
                console.log(data); 
                this.Employee_alert = this.atrCtrl.create({});

                this.full_employees=data;

                console.log(this.full_employees);
                        
                  this.Employee_alert.setTitle('Select employee..');

                          for(var i = 0; i < data.length; i++) {
                          this.emp=data[i];
                          this.Employee_alert.addInput({
                                        type:'radio',
                                        label: this.emp.member_name,
                                        value: this.emp.id
                                        })
                          }

                           this.Employee_alert.addButton({
                             text: 'Done',
                             cssClass:'alertCustomCss',
                             handler: (data) => {
                               if(data){
                                 console.log(data);
                                 this.employee_data=this.emp.member_name;
                                 // d.textContent = this.employee_data;
                               }                                            
                             }
                           });
                           this.Employee_alert.setCssClass('alertCustomCss');
                           this.Employee_alert.present();

              loader1.dismiss();  
       
              },
               err => {
               console.log(err);
               loader1.dismiss();
              },
              () => console.log('completed')
              );
     
     
               });
2

employee_data is a property of the page. It sounds like you want to move that onto each member of cartList.

3

No Bro…when i click on a cart item the alert popup will come, i select an employee from the alert popup,i want that employee name should shown on that particular cart item only. But in my case, the selected employee name is set in all cart items. is i need to use ngModel? How it is? can you please help me out?

4

please help me to solve the issue

5

If you want each Cart item to to have each selected Employee,
pass item to select_emplyee(i) method not index for ex. (click)=“select_emplyee(item)”.

Then in implementation add one more extended property to your cartList json called employeeName.

select_emplyee(item) {
-----
  this.Employee_alert.addButton({
    text: 'Done',
    cssClass: 'alertCustomCss',
    handler: (data) => {
      if (data) {
        item.employeeName = this.emp.member_name;
        //item.employeeName = data.member_name;
      }
    }
  });
-----
}

and your html will have selected employee:

<button ion-item  no-lines  margin-top button color="light" (click)="select_emplyee(item)"> {{item.employeeName || 'Select Employee'}}<ion-icon item-end name="people"></ion-icon></button>
6

Thank you very much. Its worked. :heart_eyes: