如何用角的图像取代先前和下一个按钮的分页?

here is my html code for pagination , i am not getting how would i replace the next and previous buttons with the images , it is not even showing next and previous buttons in the html code itself , i have used the pagination tag to create a pagination , it is working fine but i need to replace the previous and next text with the images ,kindly help.

这是我对分页的html代码,我得不到我怎么替换下一个和之前的按钮图片,它甚至不是显示下一个和之前的按钮在html代码本身,我使用了分页标签创建一个分页,它工作正常但我需要更换的前一个和后一个文本图像,请帮助。

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

                            </pagination>

my pagination control js

我的分页控制js

// pagination controls

/ /分页控件

$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);
      });

i am providing a plunker link for it :

我提供了一个柱塞连接:

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

1 个解决方案

#1

Anky, I made a small fix to your plunker. I just added an image from the web, just change to whatever you want ok?

安基，我给你的活塞做了个小修正。我刚从网络上添加了一个图片，就改成你想要的?

here is the updated plunker

这是更新后的柱塞。

as you can see I located the css in <style> tags, you just put it in your css

您可以看到，我在

the 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;
}

and the html:

html:

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

hope this is what you wanted

希望这是你想要的。

#1