Dans le tableau, obtenez l'identifiant de ligne sélectionné dans le tableau

Question

Dans la table, chaque ligne est associée à une case à cocher et une option permet de cocher toutes les lignes. Je veux obtenir les lignes sélectionnées id de la table dans le tableau.

Voici plunker code.

HTML:

<table id="datatable-buttons" class="table table-striped table-bordered"> 
            <thead> 
             <th> 
               <input type="checkbox" ng-model="selectRowId" ng-click="selectedAll()"> 
             </th> 
            </thead> 
            <tbody ng-init="get_product()"> 
             <!--step 6--> 
             <tr ng-repeat="product in filtered = (pagedItems| filter:search | orderBy : predicate :reverse) | startFrom:currentPage * entryLimit | limitTo:entryLimit | findobj:multipleVlaue | searchFor:searchString"> <!-- searchFor:searchString --> 
              <td> 
               <input type="checkbox" ng-model="selctedIds[product.id]" ng-checked="product.deleted"> 
              </td> 
             </tr> 
            </tbody> 
           </table> 

Controller:

$scope.selectedAll = function() { 
    $scope.pagedItems.forEach(function (product) { 
     if ($scope.selectRowId) { 
      product.deleted = true; 
     } else { 
      product.deleted = false; 
     } 
    }); 
} 

Answer 1

Si vous voulez quelque chose évolutive qui accueille des choses comme le filtrage complexe, pagination, etc. alors je vous suggère d'écrire une propriété angulaire à chaque objet. Donc, pour la case que nous voudrions passer cette valeur booléenne comme ceci:

<input type="checkbox" ng-model="item.$selected"/> 

Pour votre bascule tout/rien, vous devez taper sur une fonction de contrôleur:

$scope.toggleAll = function(bSelect){ 
    itemArray.forEach(function(item){ item.$selected = bSelect; }) 
} 

La raison pour laquelle je suggérer de préfixer votre valeur sélectionnée avec un $ comme $selected est que tous les appels HTTP que vous faites avec les objets, Angular dépouillera tout $property avant de convertir en JSON, juste au cas où votre backend a un problème.

Je vous recommande d'utiliser un filtre pour tirer les ID:

<div>{{ itemArray | getSelIds }}</div> 

et le filtre

.filter('geSeltIds', function(){ 
    return function(items){ 
     //if you happen to use lodash 
     return _.chain(items).filter({$selected:true}).map('id').value() 

     //manual 
     ids = [] 
     items.forEach(function(item){ 
      if(item.$selected) 
       ids.push(item.id) 
     }) 
     return ids 
    } 
}) 

Answer 2

Ce filtre est plus propre:

.filter(function (item) { 
      return item.$selected; 
    }).map(function (item) { return item.id });