Przełącz wszystkie pola wyboru Angular w grupie

Question

Mam tabelę elementów tekstowego pola wyboru, każdy z opisem i polem wyboru. Teraz muszę dodać pole wyboru uber, które wyczyści lub sprawdzi wszystkie pola. Obecny kod jest pokazany poniżej, z moją pierwszą próbą wyróżnienia rozwiązania.

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

Mógłbym pewnie tak łatwo to zrobić z jQuery, ale wolałbym użyć jQuery fasadę kątowej, a niech nie będzie krzyżowanie ras ram.

Answer 1

początek trzeba skonfigurować połączenie ng-model do wyboru przełącznikiem, aby uczynić tę pracę sprawa, albo kątowa może prawdopodobnie complain:

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

Następnie, należy pętli wyniki i związać je z wartością pól wyboru:

$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

Zmieniano muszę zauważyć, że podejście przełączanie elementów UI jako wyboru różni się od zakresu kątowego za. Angular głównie jest używany jako platforma MV * databound, pobierając dane do widoku. Należy przeczytać więcej na temat korzystania kątowa (lub innego MV * ramy jak Backbone): "Thinking in AngularJS" if I have a jQuery background?

Answer 2

W przypadku toggleCheckboxes wystarczy ustawić wszystkie modele zgodnie z wybraną wartością.

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