Remove deselected checkbox value from Array using Angular

Question

This is simple one but i still somehow couldn't get it to work.

I have default value checked, checkbox. So when edit, of course the default value is chosen, but later I want to remove the default value and choose another value. Here it is

array1=[] //empty

After I check a checkbox, it will inserted to this array

array1=["sun"]

If I select 3 values (array1["sun","stars","moon"]) but I deselect the first selection (the default selection), it will be still in the array. (array1["sun","stars","moon"]) but I the expected result is this:

array1["stars","moon"]

No more first selection. So how to remove deselected value from array using Angular/Javascript?

I have tried use splice, remove and set

score 2 · Answer 1 · answered Apr 06 '17 at 06:29

Same thing developed and used in project :

Template side :

<label *ngFor="let hobby of hobbies" #checkbox class="mdl-checkbox mdl-js-checkbox">
    <input type="checkbox" name="hobbies" [value]="hobby" 
    (change)="populateMyHobbies(hobby,$event.target.checked)" class="mdl-checkbox__input">
    <span class="mdl-checkbox__label">{{hobby}}</span>
</label>

Component Side :

selectedHobbies = [];

populateMyHobbies(value , status:boolean)
{
    if(this.selectedHobbies.indexOf(value) === -1 && status)
    {
        this.selectedHobbies.push(value);
    }
    else if(!status)
    {
        let index = this.selectedHobbies.indexOf(value);
        this.selectedHobbies.splice(index, 1);
    }
}

Here selectedHobbies will give you what you want.

Have to change just name as per your app.

tq vivek, but my code still adding the default value. but it is ok, you code helped me too. let me try again — user3431310, Apr 07 '17 at 04:38

score 1 · Answer 2 · edited Apr 06 '17 at 06:31

1

i used it once in my project. change the code according to your need. logic is same.

html part

<input type="checkbox" value="{{category._id}}" (change)="pushpopcategory(category._id)" id="{{category._id}}">

component code

pushpopcategory(value) {
        if ((<HTMLInputElement>document.getElementById(value)).checked) {
            this.categoryAdd.push(value);
        } else {
            let indexx = this.categoryAdd.indexOf(value);
            this.categoryAdd.splice(indexx, 1);
        }
    }

edited Apr 06 '17 at 06:31

Trash Can

6,608
5
24
38

answered Apr 06 '17 at 06:12

Amit kumar

6,029
6
30
40

1

Your if-else gives me goosebumps. Also, please remove spaces in `<>` to avoid confusion for potential readers – Trash Can Apr 06 '17 at 06:19
1

@Dummy my friend you can change format. i will accept you edit. – Amit kumar Apr 06 '17 at 06:23
hi @AmitSuhag i did have this code , i have tried , it is not working, coz this type of code will only work when the user click and unclick. but what about if the default value is there and pushed inside array. so evrytime i click submit it will go to this default value n pushed and later if user dont want , it supposed to removed(coz we used spliced there), but unfortunately it is not removed.... – user3431310 Apr 06 '17 at 06:28
@user3231310 you have not mention anything in question. this code is for adding and removing into array. try console.log in your code it may help to detect issue. add plnkr of your code if possible – Amit kumar Apr 06 '17 at 06:41

Remove deselected checkbox value from Array using Angular

2 Answers2

Linked