Using Angular, how can I toggle between two functions?

Question

I am creating a grocery list app that has a food food name on each row. The left column displays items that are not needed and the right column displays items that are needed. Currently I can change the state by clicking on each column. However, I'd like to toggle between these two functions so that switching the state works by clicking on the column like it does now, or just the row.

The HTML:

<ion-row id="test" (press)="delete(list)">
    <ion-col class="offFoods" [ngClass]="{'grey-out': list.state == 'on'}" (tap)="additem(list)">
        {{list.foodname}}
    </ion-col>
    <ion-col  class="onFoods" [ngClass]="{'grey-out': list.state == 'off'}" (tap)="unlist(list)">
        {{list.foodname}}
    </ion-col>
</ion-row>

The TS for these functions:

additem(list) {
    var listkey = this.listKey;
    var customlistData = {
      category: list.category,
      foodname: list.foodname,
      state: "on",
    };

    var user = firebase.auth().currentUser;
    var uid = user.uid;

    var foodid = list.$key;//Must click Banana

    if(this.plt.is('ios')) {
      this.taptic.selection();
      }
    if (this.plt.is('android')) {
        this.vibration.vibrate(75);
      }
    return firebase.database().ref('userlists' + '/' + listkey +  '/' + 'list' + '/' + foodid).set(customlistData);

}

unlist(list) {
    var listkey = this.listKey;
    var customlistData = {
      category: list.category,
      foodname: list.foodname,
      state: "off",
    };

    var user = firebase.auth().currentUser;
    var uid = user.uid;

    var foodid = list.$key;//Must click Banana

    if(this.plt.is('ios')) {
      this.taptic.selection();
      }
    if (this.plt.is('android')) {
        this.vibration.vibrate(75);
      }
    return firebase.database().ref('userlists' + '/' + listkey +  '/' + 'list' + '/' + foodid).set(customlistData);
}

Sam S · Accepted Answer · 2017-12-14 18:41:12Z

2

Since list is passed as a parameter, then you can reference the current state and toggle it like so:

additem(list) {
var listkey = this.listKey;
var customlistData = {
  category: list.category,
  foodname: list.foodname,
  state: (list.state=="off")?"on":"off,
};

...

}

Could even rename this function to toggleItem(list) and then move it to the parent row div:

<ion-row id="test" (press)="delete(list)" (tap)="toggleItem(list)">
...
</ion-row>

answered Dec 14, 2017 at 18:41

Sam S

5661 gold badge6 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Iancovici · Accepted Answer · 2017-12-13 12:58:46Z

0

You can create a third parameter, or a boolean array to indicate what state each item on the list is.

Then use one general function to maneuver which function to use.

   changeFoodState(itemIndex: number)
   {
      if(state[itemIndex]){
         additem(list[itemIndex])
      }else {
         unlist(list[itemIndex])
      }
   }

answered Dec 13, 2017 at 12:58

Iancovici

5,7317 gold badges41 silver badges61 bronze badges

Collectives™ on Stack Overflow

Using Angular, how can I toggle between two functions?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related