角スマートテーブルが動作しない

Question

スマートテーブルhttp://lorenzofox3.github.io/smart-table-website/を使用していますが、パイプ/ ajaxプラグインの例に従っています。しかし、そのデータは表示されません。これは私が

<div ng-controller="AboutCtrl"> 
    <table class="table" st-pipe="mc.callServer" st-table="mc.displayed"> 
    <thead> 
    <tr> 
     <th st-sort="id">id</th> 
     <th st-sort="name">name</th> 
     <th st-sort="age">age</th> 
     <th st-sort="saved">saved people</th> 
    </tr> 
    <tr> 
     <th><input st-search="id"/></th> 
     <th><input st-search="name"/></th> 
     <th><input st-search="age"/></th> 
     <th><input st-search="saved"/></th> 
    </tr> 
    </thead> 
    <tbody ng-show="!mc.isLoading"> 
    <tr ng-repeat="row in mc.displayed"> 
     <td>{{row.id}}</td> 
     <td>{{row.name}}</td> 
     <td>{{row.age}}</td> 
     <td>{{row.saved}}</td> 
    </tr> 
    </tbody> 
    <tbody ng-show="mc.isLoading"> 
    <tr> 
     <td colspan="4" class="text-center">Loading ... </td> 
    </tr> 
    </tbody> 
    <tfoot> 
    <tr> 
     <td class="text-center" st-pagination="" st-items-by-page="10" colspan="4"> 
     </td> 
    </tr> 
    </tfoot> 
    </table> 

</div> 

、ここでは私のjs

angular.module('eventsApp') 
    .controller('AboutCtrl', ['Resource', function (service) { 

    var ctrl = this; 

    this.displayed = []; 

    this.callServer = function callServer(tableState) { 

     ctrl.isLoading = true; 

     var pagination = tableState.pagination; 

     var start = pagination.start || 0;  // This is NOT the page number, but the index of item in the list that you want to use to display the table. 
     var number = pagination.number || 10; // Number of entries showed per page. 

     service.getPage(start, number, tableState).then(function (result) { 
     ctrl.displayed = result.data; 
     tableState.pagination.numberOfPages = result.numberOfPages;//set the number of pages so the pagination can update 
     ctrl.isLoading = false; 
     }); 
    }; 

    }]).factory('Resource', ['$q', '$filter', '$timeout', function ($q, $filter, $timeout) { 

    //this would be the service to call your server, a standard bridge between your model an $http 

    // the database (normally on your server) 
    var randomsItems = []; 

    function createRandomItem(id) { 
    var heroes = ['Batman', 'Superman', 'Robin', 'Thor', 'Hulk', 'Niki Larson', 'Stark', 'Bob Leponge']; 
    return { 
     id: id, 
     name: heroes[Math.floor(Math.random() * 7)], 
     age: Math.floor(Math.random() * 1000), 
     saved: Math.floor(Math.random() * 10000) 
    }; 

    } 

    for (var i = 0; i < 1000; i++) { 
    randomsItems.push(createRandomItem(i)); 
    } 


    //fake call to the server, normally this service would serialize table state to send it to the server (with query parameters for example) and parse the response 
    //in our case, it actually performs the logic which would happened in the server 
    function getPage(start, number, params) { 

    var deferred = $q.defer(); 

    var filtered = params.search.predicateObject ? $filter('filter')(randomsItems, params.search.predicateObject) : randomsItems; 

    if (params.sort.predicate) { 
     filtered = $filter('orderBy')(filtered, params.sort.predicate, params.sort.reverse); 
    } 

    var result = filtered.slice(start, start + number); 

    $timeout(function() { 
     //note, the server passes the information about the data set size 
     deferred.resolve({ 
     data: result, 
     numberOfPages: Math.ceil(filtered.length/number) 
     }); 
    }, 1500); 


    return deferred.promise; 
    } 

    return { 
    getPage: getPage 
    }; 

}]); 

である私のhtmlで持っているものであり、これは

Answer 1

この

<div ng-controller="AboutCtrl"> 

を変更してみてくださいどのような私のブラウザのショーです

へ

<div ng-controller="AboutCtrl as mc"> 

Answer 2

< /スクリプト> - > < /スクリプト> < /スクリプト> < /スクリプト> - >

<script> 
     angular.module('eventsApp', ['smart-table', 'ngSanitize', 'ngRoute']) 
       .controller('AboutCtrl', ["$scope", "Resource", function ($scope, Resource) { 

        var ctrl = this; 
        this.displayed = Resource.GetData(); 
          this.callServer = function callServer(tableState) { 

           ctrl.isLoading = true; 

           var pagination = tableState.pagination; 

           var start = pagination.start || 0;  // This is NOT the page number, but the index of item in the list that you want to use to display the table. 
           var number = pagination.number || 10; // Number of entries showed per page. 

           Resource.getPage(start, number, tableState).then(function (result) { 
            ctrl.displayed = result.data; 
            tableState.pagination.numberOfPages = result.numberOfPages; //set the number of pages so the pagination can update 
            ctrl.isLoading = false; 
           }); 
          }; 

       } ]).factory('Resource', ['$q', '$filter', '$timeout', function ($q, $filter, $timeout) { 

        //this would be the service to call your server, a standard bridge between your model an $http 

        // the database (normally on your server) 
        var randomsItems = []; 
        function GetData() { 
         function createRandomItem(id) { 
          var heroes = ['Batman', 'Superman', 'Robin', 'Thor', 'Hulk', 'Niki Larson', 'Stark', 'Bob Leponge']; 
          return { 
           id: id, 
           name: heroes[Math.floor(Math.random() * 7)], 
           age: Math.floor(Math.random() * 1000), 
           saved: Math.floor(Math.random() * 10000) 
          }; 

         } 

         for (var i = 0; i < 1000; i++) { 
          randomsItems.push(createRandomItem(i)); 
         } 

         return randomsItems; 
        } 

        //fake call to the server, normally this service would serialize table state to send it to the server (with query parameters for example) and parse the response 
        //in our case, it actually performs the logic which would happened in the server 
        function getPage(start, number, params) { 

         var deferred = $q.defer(); 

         var filtered = params.search.predicateObject ? $filter('filter')(randomsItems, params.search.predicateObject) : randomsItems; 

         if (params.sort.predicate) { 
          filtered = $filter('orderBy')(filtered, params.sort.predicate, params.sort.reverse); 
         } 

         var result = filtered.slice(start, start + number); 

         $timeout(function() { 
          //note, the server passes the information about the data set size 
          deferred.resolve({ 
           data: result, 
           numberOfPages: Math.ceil(filtered.length/number) 
          }); 
         }, 1500); 


         return deferred.promise; 
        } 

        return { 
         getPage: getPage, 
         GetData: GetData 

        }; 

       } ]); 

    </script> 
</head> 
<body ng-app="eventsApp"> 
<div ng-controller="AboutCtrl as mc"> 
    <table class="table" st-pipe="mc.callServer" st-table="mc.displayed"> 
    <thead> 
    <tr> 
     <th st-sort="id">id</th> 
     <th st-sort="name">name</th> 
     <th st-sort="age">age</th> 
     <th st-sort="saved">saved people</th> 
    </tr> 
    <tr> 
     <th><input st-search="id"/></th> 
     <th><input st-search="name"/></th> 
     <th><input st-search="age"/></th> 
     <th><input st-search="saved"/></th> 
    </tr> 
    </thead> 
    <tbody ng-show="!isLoading"> 
    <tr ng-repeat="row in mc.displayed"> 
     <td>{{row.id}}</td> 
     <td>{{row.name}}</td> 
     <td>{{row.age}}</td> 
     <td>{{row.saved}}</td> 
    </tr> 
    </tbody> 
    <tbody ng-show="mc.isLoading"> 
    <tr> 
     <td colspan="4" class="text-center">Loading ... </td> 
    </tr> 
    </tbody> 
    <tfoot> 
    <tr> 
     <td class="text-center" st-pagination="" st-items-by-page="10" colspan="4"> 
     </td> 
    </tr> 
    </tfoot> 
    </table> 

</div> 
</body> 
</html>