ng-table从rails api获取数据不起作用

时间:2015-02-18 20:42:18

标签: ruby-on-rails angularjs get pagination ngtable

我正在尝试使用Angularjs ng-table创建一个包含分页的简单表。 我将js和css文件包含在我的rails 3布局中。当页面首次加载时,它会显示一个表然后触发一个http到rails控制器来获取json(它可以正常工作直到这一点)。 我要做的就是在我的桌子上添加分页。

我收到错误“未定义角度”,并且没有来自http的请求到达rails控制器。请告诉我这里我做错了什么。 谢谢

(function(){
  var app = angular.module("apTags", ["ngTable"])
  // call back after table finished ng-repeat
    .directive('onFinishRender', function ($timeout) {
      return {
        restrict: 'A',
        link: function (scope, element, attr) {
          if (scope.$last === true) {
            $timeout(function () {
                scope.$emit('ngRepeatFinished');
                tableResponsiveAdjustHeight();
            });
          }
        }
      }
  });
  app.controller("apTagsController", [ "$http", function($scope, ngTableParams, $http){
    // table has empty data when page first loaded
    var apTags = this;
    apTags.tags = [];
    // Then it fires a http get to rails api to get data and append to table
    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10           // count per page
    }, {
        total: data.length, // length of data
        getData: function($defer, params) {
            $http.get("ap_tags.json", {params: { api: true, page: params.page() } }).success(function(data){
              apTags.tags = data;
              $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
            });
        }
    });

  }]);
})();
<div class="container" ng-app="apTags">
  <div ng-controller="apTagsController as list">
    <p><strong>Page:</strong> {{tableParams.page()}}</p>
        <p><strong>Count per page:</strong> {{tableParams.count()}}</p>
    <table ng-table="tableParams" id="table_tags" class="table table-condensed table-bordered table-hover">
      <tr ng-repeat="tag in list.tags" on-finish-render="ngRepeatFinished">
        <td data-title="'Tag'">{{tag.name}}</td>
        <td data-title="'Share'">{{tag.share}}%</td>
        <td data-title="'Direct Product Count'"></td>
      </tr>
    </table>
  </div>
</div>

0 个答案:

没有答案