क्यों कोणीय जेएस

Question

में splice ठीक से काम नहीं करता है मैं एक डेमो बनाने की कोशिश कर रहा हूं जिसमें मेरे पास चेकबॉक्स सूची है। मैं ng-repeat का उपयोग करके सूची प्रदर्शित करने में सक्षम हूं।

उपयोगकर्ता को एक चेक बॉक्स पर क्लिक करने की आवश्यकता है (केवल एक चेकबॉक्स चेक किया गया है) .it केवल एक कॉलम (100%) चौड़ाई प्रदर्शित करता है। जिस उपयोगकर्ता ने दो स्तंभों की जांच की है, यह बराबर चौड़ाई (50%) के दो कॉलम प्रदर्शित करता है। यदि उपयोगकर्ता की जांच तीन स्तंभ यह समान चौड़ाई ..As के तीन स्तंभ दिखाने के रूप में यदि उपयोगकर्ता चार चेकबॉक्स चेक यह समान चौड़ाई ..Initially चेकबॉक्स के कुछ चेक किया गया है (जाँच: सच) के चार स्तंभ दिखाने ..

• मेरा पहला कदम चेक विकल्प "प्रशिक्षण 3" अनचेक करना है .. लेकिन अनचेक किए जाने के बाद भी यह प्रदर्शित क्यों होता है? मैं पहले से ही splice का उपयोग करें। तरीका ?

यहाँ मेरी कोड 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); 

    } 

}) 

यहाँ मैं प्रदर्शित करने के लिए

<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

यह बहुत सरल हो सकता है कोशिश कर रहा हूँ है। एचटीएमएल में आप भी ngChange हैंडलर की जरूरत नहीं है, बस की जाँच की संपत्ति के लिए बाध्य: पर किसी भी तर्क के बिना, स्वच्छ नियंत्रक

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

परिणाम के रूप में

तो:

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

और फिर बस ngRepeat साथ कॉलम प्रस्तुत करना सभी, कोणीय के साथ टेम्पलेट vm.data | filter:{checked:true} का उपयोग कर सभी आवश्यक कॉलम फ़िल्टरिंग कर रहे हैं।

डेमो:http://codepen.io/anon/pen/bEBydL?editors=101

Answer 2

यह क्या हो रहा है क्योंकि आप 2 सूची से हटा, जबकि प्रशिक्षण 3 0 सूचकांक में मौजूद है कोशिश कर रहे हैं।

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

    } 

इस पर अपना दूसरा हिस्सा बदलें। और यह ठीक काम करेगा।

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