How to implement plus and minus counter with ion-list, the list that gets data from server?


#1

i have create a counter ! the counter i working fine! but the problem is that while to make increment in any list one of list items it increments in all of the list items here is my code!!!

import { Component } from ‘@angular/core’;
import { IonicPage, NavController, NavParams } from ‘ionic-angular’;
import { Http } from ‘@angular/http’;
import ‘rxjs/add/operator/map’;
import { OrderInfoPage } from ‘…/order-info/order-info’;

/**

@IonicPage()
@Component({
selector: ‘page-home-delivery’,
templateUrl: ‘home-delivery.html’,
})
export class HomeDeliveryPage {
posts:any;
prods:any;
public quantity : number = 0;

public apiUrl = ‘http://xxxx.xxxxx.com/staging/projects/kandns/allcategory.php’;
constructor(public navCtrl: NavController, public navParams: NavParams,public http:Http) {

this.allcategories();
}

ionViewDidLoad() {
console.log(‘ionViewDidLoad HomeDeliveryPage’);
}

allcategories(){
this.http.get(this.apiUrl).map(res => res.json()).subscribe(data => {

  this.posts = data; 
  console.log(this.posts)
   });

}
onSelectChange(category:string){
console.log(category);
this.loadProduct(category);

}

loadProduct(category:string){

this.http.get('http://xxx.xxxx.com/staging/projects/kandns/products.php?category='+category).map(res => res.json()).subscribe(data => {

  this.prods = data; 
  console.log(this.prods)
//  console.log(this.posts[0].ingredients);

});

}
plus(){

this.quantity += 1;
console.log(this.quantity);

}
minus(){
if(this.quantity>=1){
this.quantity -= 1;
console.log(this.quantity);
}else{
alert(“Order can not be less then 0”);
}

}
next(){
this.navCtrl.push(OrderInfoPage);
}
}
////////////////////////////
here is my html!!
/////

HOME DELIVERY

Select Products {{item.category}}
          </ion-select>
      </ion-item>
  </ion-col>
  </ion-row>
</ion-grid>
{{item.Products}}
{{quantity}}
        </ion-row>
          
           
          
      </ion-col>
      
    </ion-row>
    
  </ion-item>
 
</ion-list>
NEXT ![Capture|320x457](upload://pxyqhko1HbyVwD5zyXgSMaYisD7.PNG)