dirpaginate为不同的范围变量产生相同的行数

Question

我有3个列表项，每个都有一个div： -

<div class="tabs"> <h3>Legislaotrs</h3> <ul class="nav nav-tabs"> <li class="active"><a href="#ByState" onclick="showDiv('ByState','ByHouse','BySenate')">By State</a></li> <li><a href="#ByHouse" onclick="showDiv('ByHouse','ByState','BySenate')">House</a></li> <li><a href="#BySenate" onclick="showDiv('BySenate','ByState','ByHouse')">Senate</a></li></ul> </div>


div如下： -

<div id="ByState"> <div class="search" style="float: right;"> <form class="form-inline"> <div class="form-group"> <label>Search</label> <input type="text" ng-model="search" class="form-control" placeholder="Search"> </div> </form> 
</div> <table class="table table-striped table-hover">
 <thead>
 <tr>
 <th>Party</th>
<th>Name</th>
<th>Chamber</th>
<th>District</th>
<th>State</th>
</tr>
 </thead>
 <tbody>
 <tr dir-paginate="user in users|orderBy:['state_name','fullname']|filter:search|itemsPerPage:10">
 <td> <img src="{{user.party_name}}" style="max-height: 10%;max-width: 10%;"/> </td>
 <td>{{user.fullname}}</td>
 <td > <img src="{{user.chamber_type}}" style="max-height: 8%;max-width: 7%;"/>{{user.chamber_name}} </td>
 <td>{{user.district_name}}</td>
 <td>{{user.state_name}}</td>
 <td> <button type="button" class="btn btn-primary">View Details</button></td>
 </tr>
 </tbody>
 </table>
 </div>

第二个div： -

<div id="ByHouse" style="display: none;"> <div class="search" style="float: right;"> <form class="form-inline"> <div class="form-group"> <label>Search</label> <input type="text" ng-model="search" class="form-control" placeholder="Search"> </div> </form> 
</div> <table class="table table-striped table-hover">
 <thead>
 <tr>
 <th>Party</th>
<th>Name</th>
<th>Chamber</th>
<th>District</th>
<th>State</th>
</tr>
 </thead>
 <tbody>
 <tr dir-paginate="user in house|orderBy:['fullname']|filter:search|itemsPerPage:10">
 <td> <img src="{{user.party_name}}" style="max-height: 10%;max-width: 10%;"/> </td>
 <td>{{user.fullname}}</td>
 <td > <img src="{{user.chamber_type}}" style="max-height: 8%;max-width: 7%;"/>{{user.chamber_name}} </td>
 <td>{{user.district_name}}</td>
 <td>{{user.state_name}}</td>
 <td> <button type="button" class="btn btn-primary">View Details</button></td>
 </tr>
 </tbody>
 </table>
 </div>

第3个div： -

<div id="BySenate" style="display: none"> <div class="search" style="float: right;"> <form class="form-inline"> <div class="form-group"> <label>Search</label> <input type="text" ng-model="search" class="form-control" placeholder="Search"> </div> </form> 
</div> <table class="table table-striped table-hover">
 <thead>
 <tr>
 <th>Party</th>
<th>Name</th>
<th>Chamber</th>
<th>District</th>
<th>State</th>
</tr>
 </thead>
 <tbody>
 <tr dir-paginate="user in senate|orderBy:['fullname']|filter:search|itemsPerPage:10">
 <td> <img src="{{user.party_name}}" style="max-height: 10%;max-width: 10%;"/> </td>
 <td>{{user.fullname}}</td>
 <td > <img src="{{user.chamber_type}}" style="max-height: 8%;max-width: 7%;"/>{{user.chamber_name}} </td>
 <td>{{user.district_name}}</td>
 <td>{{user.state_name}}</td>
 <td> <button type="button" class="btn btn-primary">View Details</button></td>
 </tr>
 </tbody>
 </table>
 </div>

问题是在$ scope变量上重复的dirpaginate会产生相同数量的结果。 $ scope.users有538行，$ scope.house有438行，而$ scope.senate有100行。但上面的每个div只产生100行。有人可以在我出错的地方帮助我。如果我注释掉最后2个div，则第一个div给出正确的行数。所以基本上所有3的组合都不起作用，但单独地它们工作正常。有人可以帮忙吗？

Answer 1

所有这些都是默认的分页ID，因为我没有给出任何分页ID。为每个div创建了pagination-id，然后在每个表下面放置了相应的pagination-id属性。这解决了这个问题。

我的代码中的更改： -

<tr dir-paginate="senate in senate|orderBy:['fullname']|filter:search|itemsPerPage:10" pagination-id="bySenate">


和

<div id="controls" class="controls" align="center"> <dir-pagination-controls pagination-id="bySenate" max-size="5" direction-links="true" boundary-links="true" > </dir-pagination-controls> </div>

对所有三个div进行了上述更改。