使用Angular从Array中删除取消选中的复选框值

时间:2017-04-06 06:03:37

标签: javascript arrays angular checkbox

这很简单,但我仍然无法让它发挥作用。

我已选中默认值,复选框。因此,在编辑时,当然会选择默认值,但稍后我想删除默认值并选择其他值。这是

array1=[] //empty

勾选复选框后,它将插入此数组

array1=["sun"]

如果我选择3个值(array1["sun","stars","moon"]) 但我取消选择第一个选择(默认选择),它仍将在数组中。 (array1["sun","stars","moon"])但我预期的结果是:

array1["stars","moon"]

不再是第一次选择。那么如何使用Angular / Javascript从数组中删除取消选择的值?

我尝试过使用spliceremoveset

2 个答案:

答案 0 :(得分:2)

在项目中开发和使用相同的东西:

模板方:

<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>

组件方:

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);
    }
}

此处selectedHobbies会为您提供所需内容。

必须根据您的应用更改名称。

答案 1 :(得分:1)

我在我的项目中使用过一次。根据您的需要更改代码。逻辑是一样的。

html部分

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

组件代码

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