演示模式下的 AngularJS 表调用虚拟数据

Question

所以我发现这个 jsfiddle http://jsfiddle.net/EnY74/20/ 正在回忆某种演示数据

正如您在此示例中看到的 https://jsfiddle.net/vsfsugkg/2/ 表只有一行，我修改该行只包含 (1, 2, 3)。

该表仍有 1,222 个条目，因此它必须在 javascript 中调用演示数据。

如何阻止表格使用虚拟数据并在我的网站上使用此示例？我已经将它包裹在我网站中的一张桌子上，但这张桌子正在做同样的事情，重复 1,222 次。

'use strict';

var App = angular.module('PaginationApp', []);

App.controller('MainCtrl', ['$scope', 'TypekitService', '$filter', function($scope, Typekit, $filter){
$scope.loadData = function(){                         Typekit.getTypekits($scope.page, $scope.per_page).then(function(response){                    
        $scope.more = response.data.library.families.length === $scope.per_page;
        $scope.families = $scope.families.concat(response.data.library.families);
        $scope.status_bar = "Showing " + ($scope.families.length === 0 ? "0" : "1") + " to " + $filter('number')($scope.families.length) + " of " + $filter('number')(response.data.library.pagination.count) + " entries";

    });
};

$scope.show_more = function(){
    $scope.page += 1;
    $scope.loadData();
}

$scope.has_more = function(){
    return $scope.more;
}

$scope.per_page = 10;
$scope.page = 1;        
$scope.families = [];        
$scope.more = true;
$scope.status_bar = "";
$scope.loadData();    
}])


App.factory('TypekitService',['$http',function($http){
return {
    getTypekits : function(page, per_page){
        return $http.jsonp('https://typekit.com/api/v1/json/libraries/full?page='+page+'&per_page='+per_page+'&callback=JSON_CALLBACK');
    }
}
}]);

当我将此分页应用到我的网站表格时，我将每行重复 20 次，所以我最终会显示 200 行的初始显示，并可以选择加载更多，有人知道为什么吗？有问题的表只包含不超过 20 条记录？

Answer 1

所以，我不确定您要做什么，但会发生什么。

1. 调用Typekit.getTypekits获取远程数据（1222 记录）。
2. 检索到的数据分配给范围变量“家庭”。
3. 在 HTML 模板中，您将遍历数组“家庭”的所有条目。
4. 由于您要迭代的模板仅包含 1,2,3，因此结果是一个包含 1,2,3 的 1,222 行的表。

如果您只想显示一条记录。删除对 getTypeKits 的调用并自己启动家庭数组。

我更新了示例，删除了所有不必要的东西：https://jsfiddle.net/vsfsugkg/18/