Chuyển đổi tất cả các hộp kiểm Góc trong một nhóm

Question

Tôi có một bảng các mục hộp kiểm văn bản, mỗi mục có mô tả và một hộp kiểm. Bây giờ tôi cần phải thêm một hộp kiểm uber sẽ xóa hoặc chọn tất cả các hộp. Mã hiện tại, được hiển thị bên dưới, với nỗ lực đầu tiên của tôi tại một giải pháp được đánh dấu.

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

Tôi có thể dễ dàng thực hiện việc này với jQuery, nhưng tôi thích sử dụng mặt tiền jQuery của Angular hơn và để không có sự nhầm lẫn của khung công tác.

Answer 1

Trước tiên bạn cần phải thiết lập một ng-model vào hộp kiểm Toggle để làm cho công việc điều này, nếu không kiễu góc may lẽ complain:

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

Sau đó, bạn nên vòng lặp kết quả của bạn và ràng buộc họ với giá trị checkbox:

$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

Sửa tôi nên nhận thấy rằng cách tiếp cận của bạn trong chuyển đổi qua lại các yếu tố giao diện người dùng như hộp kiểm khác với phạm vi góc của. Góc phần lớn được sử dụng như một khung dữ liệu MV *, lấy dữ liệu vào khung nhìn của bạn. Bạn nên đọc thêm về cách sử dụng Angular (hoặc bất kỳ khung MV * nào khác như Backbone): "Thinking in AngularJS" if I have a jQuery background?

Answer 2

Trong toggleCheckboxes, bạn chỉ cần đặt tất cả các kiểu cho giá trị bạn muốn.

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