समूह में सभी कोणीय चेकबॉक्स को टॉगल करें

Question

मेरे पास टेक्स्ट-चेकबॉक्स आइटम की एक तालिका है, प्रत्येक विवरण और चेकबॉक्स के साथ। अब मुझे एक uber-checkbox जोड़ने की ज़रूरत है जो या तो सभी बक्से साफ़ या जांच करेगी। वर्तमान कोड, नीचे दिखाया गया है, समाधान पर मेरे पहले प्रयास के साथ हाइलाइट किया गया।

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table table-bordered">    
    <tr id="myBlusteringAttempt"> 
     <td width="90%"> 
      <p>Clear/Check all options</p> 
     </td> 
     <td width="10%" align="center" valign="middle"> 
      <input type="checkbox" ng-change="toggleCheckboxes()"> 
     </td> 
    </tr> 
    <tr id="existing-code-that-works" ng-repeat="declaration in LegalDeclaration.ReplacementOfPolicy.ReplacementPolicyDeclarations"> 
     <td width="90%"> 
      <p>{{declaration.DeclarationText}}</p> 
     </td> 
     <td width="10%" align="center" valign="middle"> 
      <input type="checkbox" ng-model="declaration.AcceptDeclaration"> 
     </td> 
    </tr> 
</table> 

मैं शायद इतनी आसानी से jQuery के साथ ऐसा कर सकता है, लेकिन मैं नहीं बल्कि कोणीय के jQuery मुखौटा का उपयोग करेंगे, और वहाँ चौखटे का कोई नस्लों की मिलावट हो।

Answer 1

सबसे पहली बात आप क्रम में टॉगल चेकबॉक्स करने के लिए सेटअप एक ng-model करने की जरूरत है इस बात काम करने के लिए, वरना कोणीय शायद complain कर सकते हैं:

<input type="checkbox" ng-model="toggle" ng-change="toggleCheckboxes()"> 

बाद में, आप चाहिए पाश अपने परिणामों को और उन्हें चेकबॉक्स मूल्य के साथ बाँध:

$scope.toggle = false; 
    $scope.toggleCheckboxes = function() { 
     angular.forEach($scope.LegalDeclaration.ReplacementOfPolicy.ReplacementPolicyDeclarations, function (value, key) { 
      value.AcceptDeclaration = $scope.toggle; 
     }); 
    } 

Full working example

The code of the example above

संपादित मैं नोटिस देना चाहिए कि चेक बॉक्स के रूप में UI तत्व टॉगल के अपने दृष्टिकोण कोणीय की गुंजाइश को अलग है। कोणीय ज्यादातर डाटाबेस एमवी * फ्रेमवर्क के रूप में उपयोग किया जाता है, जो आपके विचार में डेटा लाता है। "Thinking in AngularJS" if I have a jQuery background?

Answer 2

toggleCheckboxes में, आपको बस अपने इच्छित मूल्यों पर सभी मॉडल सेट करने की आवश्यकता है।

var currentAllStatus = false; 
$scope.toggleCheckboxes = function() { 
    currentAllStatus = !currentAllStatus; 
    $scope.LegalDeclaration.ReplacementOfPolicy.ReplacementPolicyDeclarations.forEach(function (declaration) { 
     declaration.AcceptDeclaration = currentAllStatus; 
    }); 
};