0

私は使用してスマートテーブルを表示しng-showてsg-hideいます..条件はデータがnullで、テーブルを非表示にしてデータを表示しています。ページの新規ロードのたびに機能していますが、行を削除してテーブルを空にした場合に適用したいです。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.rowcollectionhttp を使用してデータを取得し、rowcollection オブジェクトを埋めます。カスタム ディレクティブを使用して行を削除します。最初のロードでデータ長がゼロの場合は正常に動作しますが、行が削除されてから非表示になりません。

4

3 に答える 3

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の動作デモをご覧ください

これで問題が解決することを願っています:)

于 2014-07-22T09:29:02.763 に答える
0

すべてのテーブル行を削除した後、非表示条件が true (データが null) であることが確実な場合は、各行の削除後に条件をログに記録 () することで確認できます。ビューを確認するには、おそらくorconsole.logを実行する必要があります。更新されます。$scope.apply()$scope.digest()

コードを質問に追加すると、より完全な回答が得やすくなります。

于 2014-05-06T08:25:21.250 に答える
0

おそらく、$apply呼び出しで行を削除するコードをラップする必要があります。

$scope.$apply(function() {
    //delete rows here
})
于 2014-05-06T08:44:59.587 に答える