ngTable不适用于两个表

问题描述 投票:0回答:2

我使用ng-Table在angularJS中创建了一个应用程序,在我正在使用ng-Table的分组功能的应用程序中,该应用程序适用于单个表,如下面给出的样本中所示

单表在单个控制器中进行分组

Demo

但问题是,在我的应用程序中,我在一个控制器中使用两个表,当我试图将两个表与分组功能,我没有得到表显示

任何人都可以告诉我一些解决方案

两个表在一个Controller中进行分组

Demo

  <body ng-app="main" ng-controller="DemoCtrl">
    <table ng-table="firstTableParams" class="table">
      <tbody ng-repeat="group in myData.$groups">
        <tr class="ng-table-group">
          <td colspan="{{$columns.length}}">
              <strong>{{ group.value }}</strong>
          </td>
        </tr>
        <tr ng-repeat="user in group.data">
          <td sortable="name" data-title="'Name'">
                {{user.name}}
            </td>
          <td sortable="age" data-title="'Age'">
                {{user.age}}
            </td>
        </tr>
      </tbody>
    </table>


    <table ng-table="secondTableParams" class="table">
      <tbody ng-repeat="group in myAnotherData.$groups">
        <tr class="ng-table-group">
          <td colspan="{{$columns.length}}">
              <strong>{{ group.value }}</strong>
          </td>
        </tr>
        <tr ng-repeat="user in group.data">
          <td sortable="name" data-title="'Name'">
                {{user.name}}
            </td>
          <td sortable="age" data-title="'Age'">
                {{user.age}}
            </td>
        </tr>
      </tbody>
    </table>

  </body>
angularjs ngtable
2个回答
1
投票

迭代$groups

<tbody ng-repeat="group in $groups"> 

在第二个插件中,它必须是,因为你通过defer解析数据,每个表处理自己的数据

<body ng-app="main" ng-controller="DemoCtrl">
    <table ng-table="firstTableParams" class="table">
      <tbody ng-repeat="group in $groups"> //changed here
        <tr class="ng-table-group">
          <td colspan="{{$columns.length}}">
              <strong>{{ group.value }}</strong>
          </td>
        </tr>
        <tr ng-repeat="user in group.data">
          <td sortable="name" data-title="'Name'">
                {{user.name}}
            </td>
          <td sortable="age" data-title="'Age'">
                {{user.age}}
            </td>
        </tr>
      </tbody>
    </table>


    <table ng-table="secondTableParams" class="table">
      <tbody ng-repeat="group in $groups"> //changed here
        <tr class="ng-table-group">
          <td colspan="{{$columns.length}}">
              <strong>{{ group.value }}</strong>
          </td>
        </tr>
        <tr ng-repeat="user in group.data">
          <td sortable="name" data-title="'Name'">
                {{user.name}}
            </td>
          <td sortable="age" data-title="'Age'">
                {{user.age}}
            </td>
        </tr>
      </tbody>
    </table>

  </body>

1
投票

对于第一个表控制器,在两个表中使用ng-repeat中的$ data它将起作用

$scope.firstTableParams= [];
    $scope.data= data;
    $scope.firstTableParams= new ngTableParams({
       page: 1,           
       count: 10,         
     }, {
       total: $scope.data.length, 
       getData: function($defer, params) {
           var filters = params.filter();
            if (params.settings().$scope == null) {
                        params.settings().$scope = $scope;
                  }
           var tempDateFilter;
           var orderedData = params.sorting() ?
                           $filter('orderBy')($scope.data, params.orderBy()) :
                           $scope.data;
           if(filters) {

             orderedData = $filter('filter')(orderedData, filters); 
             filters.Date = tempDateFilter;
           }
           $scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
           params.total(orderedData.length); // set total for recalc pagination
           $defer.resolve($scope.users);
       }
  })`

对于第二个表控制器

$scope.secondTableParams= [];
    $scope.data1= data;
    $scope.secondTableParams= new ngTableParams({
       page: 1,           
       count: 10,         
     }, {
       total: $scope.data1.length, 
       getData: function($defer, params) {
           var filters = params.filter();
            if (params.settings().$scope == null) {
                        params.settings().$scope = $scope;
                  }
           var tempDateFilter;
           var orderedData = params.sorting() ?
                           $filter('orderBy')($scope.data1, params.orderBy()) :
                           $scope.data1;
           if(filters) {

             orderedData = $filter('filter')(orderedData, filters); 
             filters.Date = tempDateFilter;
           }
           $scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
           params.total(orderedData.length); // set total for recalc pagination
           $defer.resolve($scope.users);
       }
  })
© www.soinside.com 2019 - 2024. All rights reserved.