Question

这是我的分页的html代码，我没有得到如何用图像替换下一个和上一个按钮，它甚至没有显示html代码本身中的下一个和前一个按钮，我使用了分页标记来创建一个分页，它工作正常，但我需要用图像替换上一个和下一个文本，请帮助。

 <pagination page="currentPage" max-size="noOfPages" total-items="totalItems" items-per-page="entryLimit">

                            </pagination>

我的分页控制js

//分页控件

$scope.currentPage = 1;
        $scope.totalLeadItems = $scope.finalLeadData.dataval;
        $scope.totalItems = $scope.finalLeadData.dataval.length;
        $scope.entryLimit = 2; // items per page
        $scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);

        // $watch search to update pagination
        $scope.$watch('search', function (newVal, oldVal) {
          $scope.filtered = $filter($scope.finalLeadData.dataval, newVal);
          $scope.totalItems = $scope.filtered.length;
          $scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);
          $scope.currentPage = 1;
        }, true);
      });

我正在为它提供一个plunker链接：

 http://plnkr.co/edit/NZulJq4v8Hcl6O3AL4hw?p=preview

Answer 1

Anky，我对你的傻瓜做了一个小修理。我刚刚在网上添加了一张图片，只需更改为您想要的图片即可吗？

这是更新后的plunker

你可以看到我在<style>标签中找到了css，你只需将它放在你的css中

css：

.pagination-test>li:first-child>a, .pagination-test>li:last-child>a{
    background: url(http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png);
  background-size: 100% 100%;
  height: 34px;
  width: 34px;
}

和html：

        <pagination page="currentPage" max-size="noOfPages" total-items="totalItems" items-per-page="entryLimit" class="pagination-test"previous-text="" next-text=""></pagination>

希望这是你想要的

如何用角度中的图像替换分页上一页和下一页按钮？

1 个答案: