Angular js中的分页样式答案

【问题标题】：Pagination style in angular jsAngular js中的分页样式
【发布时间】：2016-12-30 08:04:01
【问题描述】：

我是 Angular js 的新手。我想知道如何在分页框（视图）上应用样式。下面的代码提供了矩形框视图。

<!-- table here -->

<dir-pagination-controls max-size="2" direction-links="true"
 boundary-links="true"> </dir-pagination-controls>

我想要下面的样式。

如何在角度分页中添加上述样式？

【问题讨论】：

首先，您需要检查呈现的 HTML。你知道怎么做吗？在 Chrome 或 Firefox 中，加载显示分页的页面。然后右键单击分页并选择“检查元素”。在您的开发者控制台中（当您选择“检查元素”时会打开该控制台），您可以看到用于显示分页的实际标记。 在此处提供分页标记，以便我们帮助您设置样式。

标签： javascript css angularjs pagination

【解决方案1】：

上面你使用指令进行分页。事情是指令可以有一些单独的逻辑，它也可以有它自己的 HTML 模板例如

angular.module('docsSimpleDirective', [])
.directive('myCustomer', function() {
  return {
    template: 'Name: {{customer.name}} Address: {{customer.address}}'
  };
});

正如你在这里看到的模板只是一些字符串，但它很容易可以是 html 之类的：

template: '<divid="paginator"><span>1</span><span>2</span></div>'

所以如果你想改变 HTML 的外观，你需要在 CSS 中添加样式:)

如果你有更复杂的网站结构，你也可以看看this question

您可以在此处找到有关指令的更多信息：https://docs.angularjs.org/guide/directive

【讨论】：

【解决方案2】：

 <dir-pagination-controls 
max-size="4" 
direction-links="true" 
boundary-links="true"
style="float:right; padding-right:10px;-moz-border-radius: 75px;-webkit-border-radius: 75px;">
</dir-pagination-controls>

试试这个。

【讨论】：