2016-12-13 59 views
0

我是新來角,我有一個頁面,將使用dtable。該表將建立在我的控制器,但暫時我想添加一些硬編碼行,直到我準備好填充我的表與有效的細節,但我不知道如何做到這一點。將硬編碼行添加到AngularJS表選項

HTML

<dtable class="full-height material" 
     style="height: 555px" 
     options="vm.tableoptions" 
     rows="vm.adviseraccess"> 
</dtable> 

控制器

var vm = this; 
    vm.tableoptions = 
    { 
     rowHeight: 50, 
     headerHeight: 30, 
     footerHeight: 50, 
     columnMode: 'force', 
     columns: 
     [ 
      { 
       name: "Adviser Name", 
       width: 75 
      }, 
      { 
       name: "Allow Access", 
       width: 25 
      } 
     ], 
    }; 

我想看看能否加入itemstableoptions會工作,如下圖所示,但它不會

vm.tableoptions = 
    { 
     rowHeight: 50, 
     headerHeight: 30, 
     footerHeight: 50, 
     columnMode: 'force', 
     columns: 
     [ 
      { 
       name: "Adviser Name", 

       width: 75 
      }, 
      { 
       name: "Allow Access", 

       width: 25 
      } 
     ], 
     items: 
     [ 
      { 
       "name": "One" 
      } 
      { 
       "name": "Two" 
      } 
     ] 
    }; 

而且我也試過以下

vm.adviseraccess = [ 
     { 
      name: "Antony" 
     }, 
     { 
      name: "Bob" 
     }, 
     { 
      name: "Will" 
     } 
    ]; 

回答

1

嘗試像這樣

<div ng-controller="AngularWayCtrl as showCase"> 
    <table datatable="ng" class="row-border hover"> 
     <thead> 
     <tr> 
      <th>ID</th> 
      <th>FirstName</th> 
      <th>LastName</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="person in showCase.persons"> 
      <td>{{ person.id }}</td> 
      <td>{{ person.firstName }}</td> 
      <td>{{ person.lastName }}</td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

Controller 

angular.module('showcase.angularWay', ['datatables', 'ngResource']) 
.controller('AngularWayCtrl', AngularWayCtrl); 

function AngularWayCtrl($resource) { 
var vm = this; 
vm.persons=[{ 
    "id": 860, 
    "firstName": "Superman", 
    "lastName": "Yoda" 
}, { 
    "id": 870, 
    "firstName": "Foo", 
    "lastName": "Whateveryournameis" 
}, { 
    "id": 590, 
    "firstName": "Toto", 
    "lastName": "Titi" 
}, { 
    "id": 803, 
    "firstName": "Luke", 
    "lastName": "Kyle" 
}]; 
} 

更多詳情,請參閱此鏈接Angular-dataTables