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.

Can you post the relevant code please – Tim May 06 '14 at 08:21 — Tim, May 06 '14 at 08:21

score 1 · Answer 1 · answered Jul 22 '14 at 09:29

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="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-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 :)

score 0 · Answer 2 · answered May 06 '14 at 08:25

If you are sure that the hide condition is true (data is null) after deleting all the table rows, something you can check by logging (console.log) the condition after each row delete, then you probably just need to perform a $scope.apply() or $scope.digest() to ensure your view is updated.

If you add your code to the question then it will be easier to give you a more complete answer.

score 0 · Answer 3 · answered May 06 '14 at 08:44

0

You probably have to wrap the code deleting rows in an $apply call.

$scope.$apply(function() {
    //delete rows here
})

answered May 06 '14 at 08:44

link

1,676
1
13
21

After deleting all rows in table ,,,then data is empty in table so ng-hide should apply immediatley – user3523448 May 06 '14 at 09:15
How do you delete the rows? You should delete them in the array you use as a model for the table. – link May 06 '14 at 09:18

how to hide smart table after deleting all rows?

3 Answers3