删除所有行后如何隐藏智能表？答案

【问题标题】：how to hide smart table after deleting all rows?删除所有行后如何隐藏智能表？
【发布时间】：2014-08-20 13:45:41
【问题描述】：

我正在使用 ng-show 和 sg-hide 显示智能表 ..条件是数据为空，然后隐藏表并且存在显示表的数据。每次页面新加载时它都在工作，但如果通过删除行清空表，我想申请。 angularjs 和 smarttable 是资源

第一次加载它跟随ng-hide和ng-show显示表格或其他div。如果没有要显示的数据，那么我正在隐藏，否则当我通过删除行操作清空所有行然后在删除所有行之后...然后 ng-hide 不起作用我正在使用 angularjs 和 smarttable

HTML

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

控制器

$scope.columncollection;$scope.rowcollection 并使用 http 获取数据并填充 rowcollection 对象。我们使用自定义指令删除行。首次加载时，如果数据长度为零，它可以正常工作，但行已删除，然后它不会隐藏。

【问题讨论】：

能否发下相关代码

标签： angularjs smart-table

【解决方案1】：

您的表格没有被隐藏，因为您可能没有在删除表格内容后将 hasdata 的值更改为 false。

试试这个，

在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>

在Js文件中，

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'}
    ];




}])

在delete.html中，

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

看看plunker中的工作演示

希望这能解决你的问题:)

【讨论】：

【解决方案2】：

如果您确定在删除所有表行后隐藏条件为真（数据为空），您可以通过在每行删除后记录 (console.log) 条件来检查，那么您可能只需要执行$scope.apply() 或 $scope.digest() 以确保您的视图已更新。

如果您将代码添加到问题中，则更容易为您提供更完整的答案。

【讨论】：

【解决方案3】：

您可能必须将删除行的代码封装在 $apply 调用中。

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

【讨论】：

删除表中的所有行后，表中的数据为空，因此 ng-hide 应立即应用
如何删除行？您应该在用作表格模型的数组中删除它们。