Handling Array Building via Toggling Checkboxes in Angular 2 App

Question

I am trying to come up with a simple toggle functionality where an array is built based on selections sent via checkboxes in my Angular 2 app. I seem to remember where you can handle toggling by setting one function to be equal to it's opposite, or something like that. These are the two functions I have for adding and removing array elements:

private onItemSelected(item)
{
    if (item)
    {
        this.itemsArray.push(item);
        console.log(this.itemsArray);
        return this.itemsArray;
    }
}

private onItemRemoved(item)
{
    if (item)
    {
        this.itemsArray.splice(item);
        console.log(this.itemsArray);
        return this.itemsArray;
    }
}

And then in my view I'm trying:

<md-checkbox (change)="onItemSelected('A') === onItemRemoved('A')">A</md-checkbox>
<md-checkbox (change)="onItemSelected('B') === onItemRemoved('B')">B</md-checkbox>
<md-checkbox (change)="onItemSelected('C') === onItemRemoved('C')">C</md-checkbox>

But this is not correct in it's current implementation. However, I do remember seeing something like this, though I can't remember the specific syntax. I've also considered using the "checked" JavaScript property in the conditional check. Would that be a better way to accomplish this? Or is there a simpler method to handle an array when items are added and removed based on checkbox selections?

UPDATE: After a suggestion from @ I am closer. With this implementation I can toggle of and off for one item, and the array will reflect that correctly. However, for more than one item selection it doesn't work:

private isChecked: boolean = false;
private onItemSelected(discipline)
{
  this.isChecked = !this.isChecked;

    if (item && this.isChecked)
    {
        this.itemsArray.push(item);
        console.log(this.itemsArray);
    }
    else {
        if (item && !this.isChecked)
        {
            this.itemsArray.splice(item);
            console.log(this.itemsArray);
        }
        return this.itemsArray;
    }
}

what should happen if you uncheck the checkbox?

Niladri
– Niladri

2017-09-25 18:36:55 +00:00
Commented Sep 25, 2017 at 18:36 — Niladri
– Niladri, Commented Sep 25, 2017 at 18:36
That item should be removed from the array.

Muirik
– Muirik

2017-09-25 18:37:52 +00:00
Commented Sep 25, 2017 at 18:37 — Muirik
– Muirik, Commented Sep 25, 2017 at 18:37
can you try with the code below?

Niladri
– Niladri

2017-09-25 18:48:11 +00:00
Commented Sep 25, 2017 at 18:48 — Niladri
– Niladri, Commented Sep 25, 2017 at 18:48
Looks promising. Will give it a try, thanks.

Muirik
– Muirik

2017-09-25 18:48:33 +00:00
Commented Sep 25, 2017 at 18:48 — Muirik
– Muirik, Commented Sep 25, 2017 at 18:48

Niladri · Accepted Answer · 2017-09-25 19:12:11Z

1

i have posted a more simplified version without adding any extra properties . please try the code below

private onItemSelected(item)
{
  const index: number = this.itemsArray.indexOf(item);
    if(index < 0){
         this.itemsArray.push(item);
         console.log(this.itemsArray);
         }
         else if(index != -1){
           this.itemsArray.splice(index,1);
           console.log(this.itemsArray);
         }      
   return this.itemsArray;
}

edited Sep 25, 2017 at 19:12

answered Sep 25, 2017 at 18:47

Niladri

5,9922 gold badges27 silver badges45 bronze badges

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

4 Comments

Muirik Over a year ago

It's close, but right now, if I select one - I get an array of one. If I deselect, nothing happens. If I select a second option, I now have an array of 2. Then if I de-select that second item, I get an array of 0.

Muirik Over a year ago

I made some edits to this, and am even closer. Still not quite there though. Will post my code above.

Niladri Over a year ago

@Muirik I updated my answer . please check now with less code.

Muirik Over a year ago

That did it! Much appreciated, @Niladri.

Collectives™ on Stack Overflow

Handling Array Building via Toggling Checkboxes in Angular 2 App

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related