2016-01-08 49 views
0

我使用角度和angular-table在同一頁面上顯示多個表。角度角度表動態標題名稱

我需要創建動態表和動態內容的動態表。

Plunkr her

這是與非動態標題工作的例子,但我沒有找到如何使動態

控制器:

angular.module('plunker', ['ui.bootstrap',"angular-table","angular-tabs"]); 

function ListCtrl($scope, $dialog) { 

    $scope.cols= ['index','name','email']; 
    $scope.list = [ 
     { index: 1, name: "Kristin Hill", email: "[email protected]" }, 
     { index: 2, name: "Valerie Francis", email: "[email protected]" }, 
     ... 
    ]; 
    $scope.config = { 
     itemsPerPage: 5, 
     fillLastPage: true 
    }; 

} 

HTML

<!-- this work --> 
<table class="table table-striped" at-table at-paginated at-list="list" at-config="config"> 
     <thead></thead> 
     <tbody> 
     <tr> 
      <td at-implicit at-sortable at-attribute="name"></td> 
      <td at-implicit at-sortable at-attribute="name"></td> 
      <td at-implicit at-sortable at-attribute="email"></td> 
     </tr> 
     </tbody> 
    </table> 

<!-- this fail ... --> 
<table class="table table-striped" at-table at-paginated at-list="list" at-config="config"> 
     <thead></thead> 
     <tbody> 
     <tr> 
      <td ng-repeat='col in cols' at-implicit at-sortable at-attribute="{{col}}"></td> 
     </tr> 
     </tbody> 
</table> 

我錯過了一些想法,或者這是不可能與此模塊?

你知道另一個模塊,你可以有動態標題和分頁嗎? (我嘗試也ngTable但有沒有被顯示的數據的一些bug ISSU)

回答

0

通過下面的代碼,就可以生成動態標題

<table class="table table-hover table-striped"> 
      <tbody> 
      <tr class="accordion-toggle tblHeader"> 
       <th ng-repeat="(key, val) in columns">{{key}}</th> 
      </tr> 
      <tr ng-repeat="row in rows"> 
       <td ng-if="!$last" ng-repeat="col in key(row)" ng-init="val=row[col]"> 
       {{val}} 
       </td> 
      </tr> 
      </tbody> 
     </table> 

角腳本

 var app = angular.module('myApp', []); 

    app.controller('myControl', function ($scope, $http) { 

     $http.get('http://jsonplaceholder.typicode.com/todos').success(function (data) { 
      $scope.columns = data[0]; 
      $scope.rows = data; 
     }).error(function (data, status) { 

     }); 

     $scope.key = function (obj) { 
      if (!obj) return []; 
      return Object.keys(obj); 
     } 

    });