Tüm açısal onay kutularını bir grupta değiştir

Question

Her birinde bir açıklama ve onay kutusu bulunan bir metin kutusu öğeleri tablosu var. Şimdi tüm kutuları temizleyecek veya kontrol edecek bir uber onay kutusu eklemem gerekiyor. Mevcut kod, vurgulanan bir çözümdeki ilk denememle birlikte aşağıda gösterilmiştir.

<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> 

ben bu kadar kolay jQuery ile bu yapabileceğini, ama yerine köşeli en jQuery cephe kullanın ve izin orada çerçeveler hiçbir miscegenation olurdu.

Answer 1

İlk şeyler ilk bu şey işi yapmak için geçiş onay kutusunun kurulum bir ng-model gerekir, ya da başka Açısal muhtemelen complain yapabilir: Daha sonra

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

yapmanız gerekir döngü sonuçlarınızı ve Onay kutusu değeri ile bunları bağlamak:

$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

Düzenlendi Ben onay kutuları gibi UI öğeleri geçiş yapma yaklaşımınız açısal en kapsamına farklı olduğunu göreceksiniz. Angular çoğunlukla databound MV * framework olarak kullanılır ve verilerinize görüşünüze ulaşır. `ToggleCheckboxes` yönteminden toggle olacak "Thinking in AngularJS" if I have a jQuery background?

Answer 2

toggleCheckboxes içinde, tüm modelleri istediğiniz değere ayarlamanız yeterlidir.

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