Angularjs UI.Bootstrap 分页自定义模板? [英] Angularjs UI.Bootstrap Pagination customizing template?

问题描述

如果您能在那里为我指出正确的 Angularjs UI Bootstrap 分页示例代码以自定义模板，我想要我们吗?

我尝试在 stackoverflow 中搜索 google 和此处，但找不到任何正确的示例或解释，说明如何使用模板 url 为该函数组件进行分页.

https://angular-ui.github.io/bootstrap/#/pagination

我想把缓存模板template/pagination/pagination.html"改成这样的

和一些 CSS 样式(如果需要):

div.page {向左飘浮;背景颜色:#cccccc；宽度:20px；高度:20px；}div.active {字体粗细:粗体；背景色:#ffffff；}

您可以使用 script 指令覆盖模板.因为这与默认的 Bootstrap 分页模板具有相同的 ID，它将覆盖它.请参阅此处查看演示.

Hi I would like to us if there you can point me to a correct sample code for Angularjs UI Bootstrap Pagination to customize the template?

I tried searching google and here in stackoverflow but I cannot find any correct example or explanation on how to use the template-url for pagination for this function component.

https://angular-ui.github.io/bootstrap/#/pagination

I want to change the cache template "template/pagination/pagination.html" to something like this one

<script type="text/ng-template" id="custompagination.html">
code here...
</script>

but it gave me an errors. If you have sample or tips that I can read online, please let me know.

Thanks,

解决方案

You should just be able to define your custom template in the HTML as follows:

<script type="text/ng-template" id="template/pagination/pagination.html">
  <div class="pager">
    <div class="page" ng-click="selectPage(page.number)" ng-repeat="page in pages" ng-class="{active: page.active, disabled: page.disabled}">{{page.text}}</div>
  </div>
</script>

and some CSS to style (if required):

div.page {
  float:left;
  background-color: #cccccc;
  width:20px;
  height:20px;
}

div.active {
  font-weight: bold;
  background-color: #ffffff;
}

You can override a template using the script directive. Because this has the same ID as the default Bootstrap pagination template, it will override it. See here for a demo.

这篇关于Angularjs UI.Bootstrap 分页自定义模板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！