how to hide smart table after deleting all rows?

Question

I am displaying smart table using ng-show and sg-hide ..condition is data is null then hiding table and data existed showing table. It is working every time page fresh load, but I want to apply if emptied the table by deleting rows. angularjs and smarttable are resources

At first load it is following ng-hide and ng-show to display table or other div. If no data to display then I am hiding, else data existed I am showing when I emptied all rows by delete row action then after all rows deleted... then ng-hide is not working I am using angularjs and smarttable

HTML

<div `enter code here`ng-hide="hasdata"->
<smarttable></smarttable>
</div>
<div `enter code here`ng-show="hasdata">
NO data to disply
</div>

Controller

$scope.columncollection;$scope.rowcollection and using http to get data and fill rowcollection object. and we r deleting row by using custom directive. At first load if data length is zero it works fine but row deleted then its not hiding.

MaheshKumar MaheshKumar · Accepted Answer · 2014-07-22T09:29:02

Your table is not getting hidden because, you probably have not changed the value of hasdata to false after you delete the table contents.

Try this,

In html,

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

  <head>
    <script data-require="[email protected]" 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-table.js"></script>
    <script src="script.js"></script>
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
  </head>

  <body ng-controller="mainCtrl">
    <h1>{{greetings}} Plunker!</h1>
    <div ng-show="hasdata">
    <smart-table  config="globalConfig" columns="columnsConfig" rows="items"></smart-table>
  </div>

  </body>

</html>

In Js file,

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

app.controller('mainCtrl',['$scope',function(scope){
  scope.greetings='hello';
  scope.hasdata=true;
  scope.doDelete = function(index) {
  // alert("index "+index);
   scope.items.splice(index,1);

    if(scope.items.length===0){
    //alert("scope.items.length "+scope.items.length);
    scope.hasdata=false;
  }

  }




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:'name',map:'name'},
    {label:'last Name',map:'lastName'},
    {label:'actions',cellTemplateUrl:'delete.html'}
    ];




}])

In delete.html,

<button ng-click="$parent.$parent.$parent.$parent.doDelete(displayedCollection.indexOf(dataRow))"
    class="btn btn-xs btn-primary">
        Delete
</button>

Have a look at the working demo in plunker

Hope this solves your problem :)

how to hide smart table after deleting all rows?

3 Answers