dirPaginate 不适用于 ng-repeat-start(对于可扩展表)
dirPaginate not working with ng-repeat-start(for expandable table)
我正在使用一个消耗表,因为代码如下
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>
</th>
<th>S. No.</th>
<th>Position</th>
<th>Reporting to</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="position in listPositiondtls | itemsPerPage:10" current-page="currentPage">
<td>
<button ng-click="expanded = !expanded">
<span ng-bind="expanded ? '-' : '+'"></span>
</button>
</td>
<td >{{$index+1}}</td>
<td>{{position.positionName}}</td>
<td>{{position.reportingToName}}</td>
</tr>
<tr ng-show="expanded">
<td></td>
<td colspan="3">
<div class="col-lg-6 margin_all">
<span>Department Code: {{position.depCode}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Department Name: {{position.depName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Position Name: {{position.positionName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Is He HOD:
<label>
<input type="checkbox" ng-model="position.isHeadofdepartment">
<span class="text"></span>
</label>
</span>
</div>
</td>
</tr>
</tbody>
</table>
在这里,我对可扩展表使用ng-repeat-start指令。但分页显示此警报:
Pagination directive: the pagination controls cannot be used without the corresponding pagination directive, which was not found at link time.
和一个错误:
pagination directive: the itemsPerPage id argument (id: __default) does not match a registered pagination-id.
帮助我,我需要在可扩展表中进行分页。
我认为你有 2 个错误。
- dirPaginate需要使用
dir-paginate
而不是ng-repeat
。 - 您需要使用分页控制
directive
。
要解决您的问题,请执行下一步操作:
- 更改
ng-repeat="position in listPositiondtls | itemsPerPage:10"
中dir-paginate
的ng-repeat
- 在 html 中添加
<dir-pagination-controls></dir-pagination-controls>
修改后的网页
<dir-pagination-controls></dir-pagination-controls>
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>
</th>
<th>S. No.</th>
<th>Position</th>
<th>Reporting to</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="position in listPositiondtls | itemsPerPage:10" current-page="currentPage">
<td>
<button ng-click="expanded = !expanded">
<span ng-bind="expanded ? '-' : '+'"></span>
</button>
</td>
<td >{{$index+1}}</td>
<td>{{position.positionName}}</td>
<td>{{position.reportingToName}}</td>
</tr>
<tr ng-show="expanded">
<td></td>
<td colspan="3">
<div class="col-lg-6 margin_all">
<span>Department Code: {{position.depCode}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Department Name: {{position.depName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Position Name: {{position.positionName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Is He HOD:
<label>
<input type="checkbox" ng-model="position.isHeadofdepartment">
<span class="text"></span>
</label>
</span>
</div>
</td>
</tr>
</tbody>
相关文章:
- Node.js v6.2.0类扩展不是函数错误
- 可扩展的画布作为Google Maps Javascript API中的覆盖
- 如何在可扩展ui网格中绑定子网格事件
- 使变量可用于不带闭包的异步调用
- 带有嵌入脚本的SVG可扩展到浏览器的可用空间
- 如何为表构建可扩展的子行(jQuery/Javascript)
- 为什么触发点击内容可编辑不会激活元素和设置光标
- CSS 类在特定场景中不适用
- 如何以可扩展和可折叠的树形结构显示XML模式
- 设置Sails js视图扩展不'不起作用
- 访问可扩展QML应用程序中的列表视图索引
- 使用jQuery的Chrome扩展不起作用
- 未能执行'waitUntil'在'可扩展事件'
- ng类不适用
- Chrome扩展:不安全的JavaScript尝试访问具有URL的框架域、协议和端口必须匹配
- Internet Explorer CSS类样式没有'如果存在具有相同类名的其他元素,则不适用
- angular ui路由器:创建可扩展的、不改变url的布局状态
- 读在击倒可计算不总是发射与扩展
- 可扩展
当按钮被选中时,似乎不会消失/出现 - 为什么不显示可折叠和可扩展的图像