Angular http 从 ng-click 获取
Angular http get from ng-click
我有一个相当复杂的情况,我从 API 调用数据,可能有数百甚至数千个结果。它也包括我可以调用的分页选项。
我需要使用 API 数据将结果列表分成几页。
该页面最初使用 $scope.displayData = function (url, page, limit)
加载并使用 $scope.displayData("linktomydata?", 1, 20);
调用,其中 return 从我的控制器中类似于 linktomydata?page=1&limit=20
。这会显示数据的记录。
但是我有一个指令根据每页 20 个的限制获取可能页面的总数,我正在使用一个简单的 for 循环在数据下方创建一个 links 的列表作为分页。每个 link 然后设置为使用相关参数调用 displayData 函数。
app.directive ('paginationList', function($timeout) {
return {
// Set as a replaceable element
restrict: 'E',
link: function(scope, element) {
$timeout(function () {
scope.$watch('pagination', function(pagination) {
if(pagination) {
for (var i = 1; i < scope.pagination.pages + 1; i++) {
element.append('<a href ng-click="displayData("linktomydata?", 6, 20)"></li>' + i + '</li></a>');
};
}
});
})
}
}
});
这应该会显示可用数据的第 6 页,但仍限制为 20 页。但是,当单击分页 link 并且没有任何内容被 return 编辑时,显示的数据会丢失。也没有控制台错误。
我是不是弄错了示波器之类的?还是我做错了?
如有任何帮助,我们将不胜感激。
是的,你有点混淆了不同的东西。
这样看起来会好得多:
app.directive ('paginationList', function($timeout) {
return {
replace: true
restrict: 'E',
templateUrl: 'view/paginationList.html',
link: function(scope, element) {
var linkToMyData = 'linktomydata?';
//using underscore's range method is the easiest way
$scope.range = _.range;
scope.displayData = function(page, limit){
//do the magic here
}
}
}
});
模板:
<div>
<li ng-repeat="page in range(1,pagination.pages)">
<a href ng-click="displayData(page, 20)">
</li>
</div>
用法:
<pagination-list></pagination-list>
我有一个相当复杂的情况,我从 API 调用数据,可能有数百甚至数千个结果。它也包括我可以调用的分页选项。
我需要使用 API 数据将结果列表分成几页。
该页面最初使用 $scope.displayData = function (url, page, limit)
加载并使用 $scope.displayData("linktomydata?", 1, 20);
调用,其中 return 从我的控制器中类似于 linktomydata?page=1&limit=20
。这会显示数据的记录。
但是我有一个指令根据每页 20 个的限制获取可能页面的总数,我正在使用一个简单的 for 循环在数据下方创建一个 links 的列表作为分页。每个 link 然后设置为使用相关参数调用 displayData 函数。
app.directive ('paginationList', function($timeout) {
return {
// Set as a replaceable element
restrict: 'E',
link: function(scope, element) {
$timeout(function () {
scope.$watch('pagination', function(pagination) {
if(pagination) {
for (var i = 1; i < scope.pagination.pages + 1; i++) {
element.append('<a href ng-click="displayData("linktomydata?", 6, 20)"></li>' + i + '</li></a>');
};
}
});
})
}
}
});
这应该会显示可用数据的第 6 页,但仍限制为 20 页。但是,当单击分页 link 并且没有任何内容被 return 编辑时,显示的数据会丢失。也没有控制台错误。
我是不是弄错了示波器之类的?还是我做错了?
如有任何帮助,我们将不胜感激。
是的,你有点混淆了不同的东西。 这样看起来会好得多:
app.directive ('paginationList', function($timeout) {
return {
replace: true
restrict: 'E',
templateUrl: 'view/paginationList.html',
link: function(scope, element) {
var linkToMyData = 'linktomydata?';
//using underscore's range method is the easiest way
$scope.range = _.range;
scope.displayData = function(page, limit){
//do the magic here
}
}
}
});
模板:
<div>
<li ng-repeat="page in range(1,pagination.pages)">
<a href ng-click="displayData(page, 20)">
</li>
</div>
用法:
<pagination-list></pagination-list>