2014-10-11 11 views
6

Come posso selezionare tutte le caselle di controllo sulla griglia quando faccio clic sulla casella di controllo in alto. In questo momento fa clic solo sulle caselle di controllo della pagina corrente.Se è possibile simulare il tuo soluzione su Plunk, è molto apprezzato. Grazie in anticipo.ngTabella con caselle di controllo non selezionare tutte le caselle di controllo sulla griglia

Ecco il link: Table with checkboxes

$scope.checkboxes = { 'checked': false, items: {} }; 

// watch for check all checkbox 
$scope.$watch('checkboxes.checked', function(value) { 
    angular.forEach($scope.users, function(item) { 
     if (angular.isDefined(item.id)) { 
      $scope.checkboxes.items[item.id] = value; 
     } 
    }); 
}); 

risposta

11

Sono sicuro che ormai avete capito questo, ma dal momento che la questione è stata lasciata senza risposta ed ero alla ricerca di un modo per fare proprio questo ho aggiornato il tuo plunker per riferimento futuro se qualcuno si imbatte in questa domanda.

http://plnkr.co/edit/PjTlyX?p=preview

Ci sono 2 cose da considerare, fare che si desidera controllare tutte le caselle a prescindere dal filtraggio o fa il controllo deve essere filtro centric.

impostare una variabile $ portata alla lista non filtrato se si vuole ignorare il filtraggio della sorgente di dati

var data = [{id: 1, name: "Moroni", age: 50, money: -10}, 
       {id: 2, name: "Tiancum", age: 43,money: 120}] 
$scope.data = data; 

o se si preferisce selezionare solo le caselle di controllo che sono stati filtrati impostare l'orderedData ad un altro $ portata variabile all'interno del metodo $ scope.tableParams

var orderedData = params.sorting() ? 
        $filter('orderBy')(data, params.orderBy()) : 
        data; 
      orderedData = params.filter() ? 
        $filter('filter')(orderedData, params.filter()) : 
        orderedData; 
      $scope.orderedData = orderedData; 

Allora siete liberi di scegliere le caselle In qualunque modo si preferisce semplicemente cambiando $ scope.users alla preferire variabile $ portata sotto

// watch for check all checkbox 
$scope.$watch('checkboxes.checked', function(value) { 
    angular.forEach($scope.users, function(item) { 
     if (angular.isDefined(item.id)) { 
      $scope.checkboxes.items[item.id] = value; 
     } 
    }); 
}); 
+0

Wow..Io è davvero bello.Grazie molto :) In realtà non ho avuto alcuna soluzione per questo fino ad ora.Grazie ancora :) – Sampath

+0

Grande! Esattamente quello di cui ho bisogno. Grazie. L'ho aggiornato per AngularJS 1.6.4 e ngTable 1.0.0: http://plnkr.co/edit/km1Sjv?p=preview –

1

Questo è un altro modo per farlo dalla documentazione ufficiale.

Vedi l'Explaination Codepen Demo here

È possibile creare il modello di intestazione come

<script type="text/ng-template" id="headerCheckbox.html"> 
    <input type="checkbox" ng-model="demo.checkboxes.checked" class="select-all" value="" /> 
</script> 

e aggiungere una colonna della tabella come

<td header="'headerCheckbox.html'"><input type="checkbox" ng-model="demo.checkboxes.items[row.id]" /></td> 

e guardare il modello demo .checkbox.checked per le modifiche

$scope.$watch(function() { 
     return self.checkboxes.checked; 
    }, function(value) { 
     angular.forEach(simpleList, function(item) { 
     self.checkboxes.items[item.id] = value; 
    }); 
}); 
Problemi correlati