how can i add a slection model checkbox in angular-table

Question

Angular Table creation code with input type checkbox.

 angular.module("tableApp",[]).controller('tableAppCtrl', ['$scope', function($scope) { $scope.titleString="Table Demo"; $scope.prodDataTable = [{ "productType": "A", "productName": "Aaaaaa" }, { "productType": "B", "productName": "Bbbbbb" }, { "productType": "C", "productName": "Cccccc" }]; } ]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div ng-app="tableApp" ng-controller="tableAppCtrl"> <h3>{{titleString}}</h3> <table> <tr> <th><input type="button" value="checkALL"></th> <th>Product Type</th> <th>Product Name</th> </tr> <tr ng-repeat="d in prodDataTable"> <td><input type="checkbox"></td> <td>{{d.productType}}</td> <td>{{d.productName}}</td> </tr> </table> </div> 

I have been using angular-table and I have to include a selection model to it.

Please suggest ways or links to use it with table.

Answer 1

use this but you need to work on the duplicate value creation-

<div  ng-app="tableApp" ng-controller="tableAppCtrl">
<h3>{{titleString}}</h3>
<table>
  <tr>
    <th><input type="button" value="{{(selectAllval==true) ? 'UncheckALL' : 'checkALL'}}" ng-click="selectAll(selectAllval)"></th>
    <th>Product Type</th>
 <th>Product Name</th>

  </tr>

  <tr ng-repeat="d in prodDataTable">
    <td><input type="checkbox" ng-checked="selectAllval" ng-click="setProductType(d.productType)"></td>
    <td>{{d.productType}}</td> 
    <td>{{d.productName}}</td>
  </tr>


</table>

{{setProductTypes}}

angular.module("tableApp",[]).controller('tableAppCtrl', ['$scope', function($scope) { 
    $scope.titleString="Table Demo"; 
    $scope.selectAllval= false; 
    $scope.setProductTypes= []; 
    $scope.selectAll= function(val){ 
        if(val==false){ 
            $scope.selectAllval= true; 
        } else{ 
            $scope.selectAllval= false; 
        } 
    }; 
    $scope.setProductType= function(type){ 
        $scope.setProductTypes.push(type); 
    }; 
    $scope.prodDataTable = [{ "productType": "A", "productName": "Aaaaaa" }, { "productType": "B", "productName": "Bbbbbb" }, { "productType": "C", "productName": "Cccccc" }]; } ]);

Answer 2

try the below code -

 angular.module("tableApp",[]).controller('tableAppCtrl', ['$scope', function($scope) { $scope.titleString="Table Demo"; $scope.selectAllval= false; $scope.selectAll= function(val){ if(val==false){ $scope.selectAllval= true; } else{ $scope.selectAllval= false; } }; $scope.prodDataTable = [{ "productType": "A", "productName": "Aaaaaa" }, { "productType": "B", "productName": "Bbbbbb" }, { "productType": "C", "productName": "Cccccc" }]; } ]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div ng-app="tableApp" ng-controller="tableAppCtrl"> <h3>{{titleString}}</h3> <table> <tr> <th><input type="button" value="{{(selectAllval==true) ? 'UncheckALL' : 'checkALL'}}" ng-click="selectAll(selectAllval)"></th> <th>Product Type</th> <th>Product Name</th> </tr> <tr ng-repeat="d in prodDataTable"> <td><input type="checkbox" ng-checked="selectAllval" ></td> <td>{{d.productType}}</td> <td>{{d.productName}}</td> </tr> </table> </div>