Auswahl mehrerer Kontrollkästchen in Angular auf Schaltfläche klicken

Question

Ich habe eine Tabelle in meinem HTML-Code, in dem die Zeilen von AngularJS ng-repeat generiert werden. Jede Zeile enthält ein Kontrollkästchen in der ersten Spalte und andere Daten in den entsprechenden Spalten. Ich versuche, alle Kontrollkästchen markiert zu markieren, wenn diese Schaltfläche angeklickt wird, die in einem anderen Teil vorhanden ist.

<tbody> 
 
    <tr ng-repeat="row in myObject track by $index" ng-class-even="'alternate-row'"> 
 
    <td name="checkbox"> 
 
     <input type="checkbox" ng-model="row.checked" ng-style="row.checkboxStyle" ng-click="setSelectedRow(row)" /> 
 
    </td> 
 
    <td>{{ row.data1 }}</td> 
 
    <td>{{ row.data2 }}</td> 
 
    </tr> 
 
</tbody>

Der Knopf ist wie folgt:

<div class="btn-group"> 
 
\t <button type="button" id="selectAll" class="btn btn-default" title="Select All" ng-click="selectAllGrid()">Select All</button> 
 
</div>

Verfahren auf dem Klicken der Checkbox genannt wird, die auf ein Array, das bestimmte Zeile fügt . Wie wird diese Methode aufgerufen, wenn ich das Kontrollkästchen bei Klick auf die Schaltfläche markiert habe?

Answer 1

verwenden die Richtlinie ng-checked

<tbody> 
    <tr ng-repeat="row in myObject track by $index" ng-class-even="'alternate-row'"> 
    <td name="checkbox"> 
     <input type="checkbox" ng-checked="checkAll" ng-model="row.checked" ng-style="row.checkboxStyle" ng-click="setSelectedRow(row)" /> 
    </td> 
    <td>{{ row.data1 }}</td> 
    <td>{{ row.data2 }}</td> 
    </tr> 
</tbody> 

und in Ihre Tastenfunktion

selectAllGrid(){ 
$scope.checkAll=true; 
} 

Answer 2

Sie können wie folgt tun:

<table> 
    <tbody> 
     <tr ng-repeat="row in myObject track by $index" ng-class-even="'alternate-row'"> 
     <td name="checkbox"> 
      <input type="checkbox" ng-model="row.checked" ng-style="row.checkboxStyle" />{{row.checked}} 
     </td> 
     <td>{{ row.data }}</td> 
     </tr> 
    </tbody> 
    </table> 


    <div class="btn-group"> 
    <button type="button" id="selectAll" class="btn btn-default" title="Select All" ng-click="selectAllGrid()">Select All</button> 
    </div> 

und in Ihrem Controller:

app.controller('MainCtrl', function($scope) { 
    $scope.allchecked = false; 

    $scope.selectAllGrid = function(){ 
    console.log($scope.allchecked); 
    $scope.allchecked = !$scope.allchecked 
    for(var i =0; i<$scope.myObject.length; i++) { 
    $scope.myObject[i].checked = $scope.allchecked ; 
    } 
    } 

    $scope.myObject = [ 
     {"data": "sdfsdf"}, 
     {"data": "asdfassafs"}, 
     {"data": "asesfrsaedfsadfsadsd"} 
    ] 
}); 

Arbeitsrumpf here