-1

How to hadnle the selection of row in smart table using checkbox at each row..and displaying count of selected rows after every cycle? It must using angularjs and smart-table

[source] http://lorenzofox3.github.io/smart-table-website/

RAS
  • 8,100
  • 16
  • 64
  • 86
user3523448
  • 35
  • 1
  • 2
  • 8

1 Answers1

2

You can include a check box using cellTemplateUrl (see smart-table documentation)

In select.html

 <input type="checkbox" ng-click="$parent.$parent.$parent.$parent.noSelected(select)" ng-model="select" />

In Html

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="smart.js"></script>
    <script src="app.js"></script>
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
  </head>

  <body ng-controller="mainCtrl" ng-init="noRow=0">
    <h1>{{greetings}} Plunker!</h1>

    No of row selected {{noRow}}

    <smart-table config="globalConfig" columns="columnsConfig" rows="items"></smart-table>
  </body>

</html>

In app.js

var app=angular.module('myApp',['smartTable.table']);

app.controller('mainCtrl',['$scope',function(scope){
  scope.greetings='hello';

   scope.noRow=0;

  scope.noSelected=function(select){

   if(select){

   scope.noRow=scope.noRow+1;
   }else{

     scope.noRow=scope.noRow-1;
   }

  }
scope.items=[
    {name:'mahesh',lastName:'kumar'},
    {name:'sachin',lastName:'ramesh'},
    {name:'varun',lastName:'gupta'},
    {name:'vijay',lastName:'kumar'},
    {name:'prem',lastName:'raj'},
    {name:'gandhi',lastName:'gandhi'},
    {name:'sathish',lastName:'kumar'},
    {name:'ram',lastName:'prasad'},
    {name:'siva',lastName:'guru'},
    {name:'dilli',lastName:'ganesh'}
    ];

  scope.globalConfig={
    isPaginationEnabled:false,
    selectionMode:'single'
  };

  scope.columnsConfig=[
      {label:'actions',cellTemplateUrl:'select.html'},
    {label:'name',map:'name'},
    {label:'last Name',map:'lastName'}

    ];

}])

Please have a look at the plunker demo.

Hope this solves your problem :)

Fracedo
  • 626
  • 7
  • 23