使用Angular從數組中刪除取消選中的複選框值

這很簡單，但我仍然無法讓它工作。
使用Angular從數組中刪除取消選中的複選框值

我有默認值勾選複選框。所以編輯時，當然選擇了默認值，但後來我想刪除默認值並選擇另一個值。這

array1=[] //empty

後我檢查複選框，它將插入到該陣列

array1=["sun"]

如果我選擇3個值（array1["sun","stars","moon"]）但我取消選擇第一選擇（默認選擇），它將仍然在陣列中。（array1["sun","stars","moon"]），但我預期的結果是這樣的：

array1["stars","moon"]

沒有更多的第一選擇。那麼如何使用Angular/Javascript從數組中刪除取消選定的值？

我曾嘗試使用splice，remove和set

來源

2017-04-06 user3431310

我用過一次在我的項目。根據您的需要更改代碼。邏輯是一樣的。

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

來源

2017-04-06 06:12:29

你的if-else給我起雞皮疙瘩。此外，請刪除'<>'中的空格，以免潛在讀者感到困惑 – Dummy

@Dummy我的朋友，您可以更改格式。我會接受你編輯。 –

嗨@AmitSuhag我有這個代碼，我試過了，它不工作，因爲這種類型的代碼只有在用戶點擊和取消點擊時纔會起作用。但是如果默認值在那裏並且被推入數組中，那麼呢？所以evrytime我點擊提交它會去這個默認值ñ推和後來如果用戶不想要，它應該刪除（因爲我們在那裏拼接），但不幸的是它不會被刪除.... – user3431310

開發項目中使用的

同一件事：

模板側：

<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會給你想要的東西。

必須根據您的應用更改名稱。

來源

2017-04-06 06:29:57

tq vivek，但我的代碼仍然添加默認值。但沒關係，你的代碼也幫助了我。讓我再試一次 – user3431310

謝謝，@ user3431310 –

使用Angular從數組中刪除取消選中的複選框值

回答

相關問題