dlaczego splice nie działają poprawnie w kątowym js

Question

Próbuję zrobić jedno demo, w którym mam jedną listę pole wyboru. Jestem w stanie wyświetlić listę za pomocą ng-repeat.

To, czego potrzebuję, jeśli użytkownik kliknie jedno pole wyboru (zaznaczone jest tylko jedno pole wyboru). Wyświetla tylko jedną kolumnę (100%) szerokości. Który użytkownik zaznaczył dwie kolumny, wyświetla dwie kolumny o równej szerokości (50%). jeśli check użytkownik trzy kolumny to pokazują trzy kolumny równych ..As szerokości tak, jakby użytkownik zaznaczone pole wyboru cztery to pokazać cztery kolumny o równej szerokości ..Initially niektóre z wyboru jest zaznaczone (sprawdzić: prawda) ..

• moim pierwszym krokiem jest odznaczenie sprawdzonej opcji "szkolenie 3" .., ale po odznaczeniu nadal wyświetla dlaczego? Już używam splice. metoda ?

tutaj jest mój kod http://codepen.io/anon/pen/adBroe?editors=101

init(); 
    function init(){ 
     for(var i =0;i<self.data.length;i++){ 
     var obj=self.data[i]; 
     if(obj.checked) 
     { 
     self.selectedList.push(obj); 
     } 
    } 
    alert('starting '+self.selectedList.length) 
    } 

    self.checkBoxClick=function(obj,i){ 
    if(obj.checked) 
     { 
     alert('if') 
     self.selectedList.push(obj); 
     }else 
     { 
      alert('else'+i); 
      self.selectedList.splice(i,1); 
     } 
    alert(self.selectedList.length); 

    } 

}) 

tutaj jest próbuję wyświetlić

<div class='container-fluid'> 
    <div class='row'> 
     <div ng-repeat="i in vm.selectedList" class='col-xs-{{12/vm.selectedList.length}}'> 
     {{i.name}} 
     </div> 
    </div> 
    </div> 

Answer 1

To może być znacznie prostsze. W HTML nie trzeba nawet ngChange obsługi, tylko wiążą się sprawdzonej własności:

<div class="checkbox" ng-repeat='v in vm.data'> 
    <label> 
     <input type="checkbox" ng-model='v.checked'> {{v.name}} 
    </label> 
    </div> 

a następnie uczynić z kolumny tylko ngRepeat:

<div ng-repeat="i in filteredList = (vm.data | filter:{checked:true})" class='col-xs-{{12/filteredList.length}}'> 
    {{i.name}} 
    </div> 

tak rezultacie czystą kontrolera bez logiki w wszystko, z Angular robi wszystkie niezbędne filtrowanie kolumn przy użyciu szablonu vm.data | filter:{checked:true}.

Demo:http://codepen.io/anon/pen/bEBydL?editors=101

Answer 2

Dzieje się tak dlatego, że starają się usunąć go z 2 indeksu podczas treningu 3 jest obecny w indeksie 0th.

else 
    { 
     alert('unchecked '+i); 
     var index = self.selectedList.indexOf(obj); 
     self.selectedList.splice(index,1); 

    } 

zmień swoją drugą część na tę. i będzie działać dobrze.

http://codepen.io/anon/pen/yeVWeQ?editors=101