lý do tại sao mối nối không hoạt động bình thường trong js góc

Question

Tôi đang cố gắng tạo một bản demo trong đó tôi có một hộp kiểm . Tôi có thể hiển thị danh sách bằng cách sử dụng ng-repeat.

Tôi cần gì nếu người dùng nhấp vào một hộp kiểm (chỉ chọn một hộp kiểm) .it chỉ hiển thị một cột (100%) chiều rộng. Người dùng đã chọn hai cột để hiển thị hai cột có chiều rộng bằng nhau (50%). nếu người dùng kiểm tra ba cột nó hiển thị ba cột của ..As chiều rộng bình đẳng như nếu người dùng kiểm tra hộp kiểm bốn nó hiển thị bốn cột chiều rộng bằng ..Initially một số hộp kiểm được kiểm tra (kiểm tra : true) ..

• bước đầu tiên của tôi là bỏ chọn tùy chọn kiểm tra "đào tạo 3" .. nhưng sau khi bỏ chọn, nó vẫn hiển thị tại sao? Tôi đã sử dụng mối nối. phương pháp ?

đây là mã của tôi 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); 

    } 

}) 

ở đây là tôi đang cố gắng để hiển thị

<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

Nó có thể đơn giản hơn nhiều. Trong HTML, bạn thậm chí không cần ngChange xử lý, chỉ cần liên kết với tài sản kiểm tra:

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

và sau đó làm cho cột chỉ với ngRepeat:

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

Vì vậy, kết quả, điều khiển sạch mà không cần bất kỳ logic ở tất cả, với Angular làm tất cả các lọc cột cần thiết bằng cách sử dụng mẫu vm.data | filter:{checked:true}.

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

Answer 2

này đang xảy ra bởi vì bạn đang cố gắng để xoá bỏ nó từ chỉ số thứ 2 trong khi đào tạo 3 là hiện nay chỉ số 0.

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

    } 

thay đổi phần khác của bạn thành điều này. và nó sẽ hoạt động tốt.

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