angular 聪明 table 不工作

Question

我正在使用智能 table http://lorenzofox3.github.io/smart-table-website/ 并且我正在尝试遵循 pipe/ajax 插件示例。但它没有显示任何数据。这就是我 html

中的内容

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

}]);

这是我的浏览器显示的内容

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>

angular 聪明 table 不工作

angular smart table not working

angularjs

angularjs-directive

angularjs-scope

smart-table