2016-06-29 8 views
0

lädt Ich habe versucht, eine kleine und einfache ngTable Demo zu schreiben, bekam aber ein Problem:kann nicht einen Array ngTable

Wenn ich versuche, ein Array zu ngTable zu setzen, zeigt der Browser nur die Kopfzeile der Tabelle, aber keine Daten. das Ergebnis ist in Screenshot:

enter image description here

der Code sind in plunker Alle

Hier ist die "Daten":

var books = [ 
 
\t \t { 
 
\t \t \t "name": "Html from start to give up", 
 
\t \t \t "price": 2, 
 
\t \t \t "comment": "An awesome book to be a pillow", 
 
\t \t \t "available": true 
 
\t \t }, 
 
\t \t { 
 
\t \t \t "name": "AngularJS from start to give up", 
 
\t \t \t "price": 2, 
 
\t \t \t "comment": "Too hard to be a pillow", 
 
\t \t \t "available": false 
 
\t \t }];

und hier ist der Weg Ich habe eine ngTable

erstellt

vm.bookTable  = createTable(books); 
 
    
 
var initpageSize = Number(localStorage.getItem('page_size') || 20); 
 
    vm.pageSize  = initpageSize; 
 
    vm.pageSizes  = [10,20,30,50,100]; 
 
    
 
    function createTable(data){ 
 
    var initParams = { 
 
     sorting: {name: "asc"}, 
 
     count: vm.pageSize 
 
    }; 
 
    var initSettings = { 
 
     counts: [], 
 
     paginationMaxBlocks: 13, 
 
     paginationMinBlocks: 2, 
 
     dataset: data 
 
    }; 
 
    return new NgTableParams(initParams, initSettings); 
 
    
 
    }

und hier ist ein Teil der html:

<body ng-controller="myController as vm"> 
 
    <div> 
 
     <table ng-table= "vm.bookTable" 
 
      class = "table" 
 
      show-filter="true"> 
 
     <tr ng-repeat="row in $data"> 
 
     \t \t <td title = "'name'" filter="{name: 'text'}" sortable="'name'"> 
 
     \t \t \t {{row.name}} 
 
     \t \t </td> 
 
     \t \t <td title = "'price'" filter="{price: 'number'}" sortable="'price'"> 
 
     \t \t \t {{row.price}} 
 
     \t \t </td> 
 
     \t \t <td title = "'comment'" filter="{comment: 'number'}" sortable="'comment'"> 
 
     \t \t \t {{row.count}} 
 
     \t \t </td> 
 
      
 
     </tr> 
 
     
 
     </table> 
 
     
 
    </div> 
 
    
 
    
 
    <p>Hello {{vm.name}}!</p> 
 
    </body>

Antwort

1

Ihr Fehler Sie createTable Funktion aufrufen, bevor Sie initpageSize gesetzt, so initParams.counts undefiniert ist

Sie haben diese Zeilen setzen, bevor Sie

var initpageSize = Number(localStorage.getItem('page_size') || 20); 
    vm.pageSize  = initpageSize; 
    vm.pageSizes  = [10,20,30,50,100]; 

Here Sie createTable nennen haben eine Arbeits Plunker.

+0

es funktioniert jetzt! Danke ~ und hier ist meine letzte Version, beheben Sie einen Fehler in der HTML-Datei, um den "Kommentar" zu zeigen –

Verwandte Themen