angularjsngtable

ngTable not working for two tables


I have created an application in angularJS using ng-Table, In the application I am using grouping feature of ng-Table, The application is working fine for single table which is shown in a sample as given below

Single Table with grouping in a single Controller

Demo

But the problem is that in my application I am using two tables within a single controller, when i tried to put two tables with grouping feature I am not getting the table displayed

Can anyone please tell me some solution for this

Two Tables with grouping in a single 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>

Solution

  • iterate over $groups

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

    in second plunk ,it must be like,since you resolving data by defer ,each table process its own data

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