javascript - 演示模式下的 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 获取远程数据 (1,222 记录)。
2. 检索到的数据被分配给范围变量“families”。
3. 在 HTML 模板中，您将迭代数组“families”的所有条目。
4. 由于您要迭代的模板仅包含 1,2,3，因此结果是一个包含 1,222 行且包含 1,2,3 的表格。

如果你只想显示一条记录。删除对 getTypeKits 的调用并自行启动 family 数组。

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