Angularjs 智能表格列显示/隐藏切换_Angularjs_Ng Grid_Smart Table

Angularjs 智能表格列显示/隐藏切换

angularjs

Angularjs 智能表格列显示/隐藏切换,angularjs,ng-grid,smart-table,Angularjs,Ng Grid,Smart Table,我是AngularJS和SmartTable的新手……我目前正在尝试让SmartTable对列进行显示/隐藏切换。据我所知，SmartTable没有做到这一点，因此我使用ng Grid show/hide功能…尝试遵循此解决方案：当我实现这个解决方案时，我的列没有显示出来如何在初始设置时将smartTable列设置为“显示”？我想这就是我错过的这是我的js： var app = angular.module('myApp', ['smart-table', 'ngGrid']); ap

我是AngularJS和SmartTable的新手……我目前正在尝试让SmartTable对列进行显示/隐藏切换。据我所知，SmartTable没有做到这一点，因此我使用ng Grid show/hide功能…尝试遵循此解决方案：

当我实现这个解决方案时，我的列没有显示出来

如何在初始设置时将smartTable列设置为“显示”？我想这就是我错过的

这是我的js：

var app = angular.module('myApp', ['smart-table', 'ngGrid']);

app.controller('paginationCtrl', ['$scope', function (scope) {
var nameList = ['Brian', 'Bob', 'Marie', 'Jennifer', 'Frank'],
    familyName = ['Smith', 'Miller', 'Patel', 'Jefferson', 'Mendez'];

...

$scope.toggleCol= function(i) {
   $scope.gridOptions.$gridScope.columns[i].toggleVisible()
}

    scope.itemsByPage=15;

scope.rowCollection = [];
for (var j = 0; j < 200; j++) {
    scope.rowCollection.push(createRandomItem());
}

}]);

var-app=angular.module（'myApp'，['smart-table'，'ngGrid']）；
app.controller（'paginationCtrl'，['$scope'，函数（scope）{
变量名称列表=['Brian'、'Bob'、'Marie'、'Jennifer'、'Frank']，
familyName=[“史密斯”、“米勒”、“帕特尔”、“杰斐逊”、“门德斯”]；
...
$scope.toggleCol=函数（i）{
$scope.gridOptions.$gridScope.columns[i].toggleVisible（）
}
范围项目分页=15；
scope.rowCollection=[]；
对于（var j=0；j<200；j++）{
scope.rowCollection.push（createRandomItem（））；
}
}]);

这是我的html：

<body ng-controller="paginationCtrl">
<p>Smart Table Example</p>
<input type="button" value="First Name" ng-click="toggleCol(0)" />
<table class="table table-striped" st-table="rowCollection">
  <thead>
    <tr>
      <th st-sort="firstName">first name</th>
      <th st-sort="lastName">last name</th>
      <th st-skip-natural="true" st-sort="balance">balance</th>
      <th>email</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in rowCollection">
      <td>{{row.firstName}}</td>
      <td>{{row.lastName}}</td>
      <td>{{row.balance}}</td>
      <td>{{row.email}}</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td class="text-center" colspan="5">
        <div st-displayed-pages="7" st-items-by-page="itemsByPage" st-pagination=""></div>
      </td>
    </tr>
  </tfoot>
</table>


智能表格示例
名字
姓
平衡
电子邮件
{{row.firstName}
{{row.lastName}
{{row.balance}}
{{row.email}

您可以在我的plunker示例中看到我的整个设置：

谢谢

万一有人想这么做，我就不去ngGrid路线了。我能够使用按钮和隐藏来完成我想要的。对于我的html，我这样做：

<button ng-click="firstNameToggle = !firstNameToggle" type="button" class="btn btn-primary">First Name</button>
    <button ng-click="lastNameToggle = !lastNameToggle" type="button" class="btn btn-info">Last Name</button>
    <button ng-click="balanceToggle = !balanceToggle" type="button" class="btn btn-default">Balance</button>
    <button ng-click="emailToggle = !emailToggle" type="button" class="btn btn-success">Email</button>
  </div>
<table class="table table-hover table-striped" st-table="rowCollection">
  <thead>
    <tr>
      <th ng-hide="firstNameToggle" st-sort="firstName">first name</th>
      <th ng-hide="lastNameToggle"st-sort="lastName">last name</th>
      <th ng-hide="balanceToggle"st-skip-natural="true" st-sort="balance">balance</th>
      <th ng-hide="emailToggle">email</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in rowCollection">
      <td ng-hide="firstNameToggle">{{row.firstName}}</td>
      <td ng-hide="lastNameToggle">{{row.lastName}}</td>
      <td ng-hide="balanceToggle">{{row.balance}}</td>
      <td ng-hide="emailToggle">{{row.email}}</td>
    </tr>
  </tbody>

我知道这很古老，但我写了这个指令来解决它。它可以独自完成

如果您想要更具动态性的解决方案，我建议您使用如下列对象数组：

 $scope.columns=[{name: 'firstName', template: 'template1.html'}, {name: 'lastName', template: 'template2.html' }];

然后在智能表体中呈现这些列：

   <tbody>
    <tr ng-repeat="row in rowCollection">
      <td ng-repeat="col in columns">
        <div ng-include src="col.template"></div>
      </td>
    </tr>
   </tbody>

我有一个例子，我定义了columns数组，并为每个列创建了模板文件。使用lrDragNDrop，该工具还具有拖放功能。

你说你想使用ngGrid，但你没有。否则，您将无法获得$gridScope。还可以查看控制台中的其他错误

   <tbody>
    <tr ng-repeat="row in rowCollection">
      <td ng-repeat="col in columns">
        <div ng-include src="col.template"></div>
      </td>
    </tr>
   </tbody>