Question

我已经在我们网站的不同选项卡上实现了分页功能，并且可以正常工作，但是问题是，切换选项卡后，我们调用了另一个获取列表的功能，但是每次都会触发页面更改。 ng-click它是触发器，但是不能正常工作告诉我，任何人，如何解决此问题？

<div class="tab-pane fade in active">
<div class="container" ng-if="!isNoRecordFound">			

<div class="row hotel-list-box bg_gray margin-b15 boxshadow" 
  dir-paginate="airport in airportlist | itemsPerPage: 10" 
        total-items="total_count" current-page="currentPage" pagination-id="airportPagination">

  <div class="col-md-5 padding-lr0">
    <div class="image-box border-radius10">
      <img ng-src="{{airport.img}}" class="img-responsive">
    </div>
  </div><!-- end of col-md-5 -->
  <div class="col-md-7">
    <div class="content-box">
      <div class="box-heading">
        <h3 class="f-18 black padding-l15">{{airport.name}}</h3>
      </div>
      <div class="row">
        <div class="col-md-8">
          <div class="box-details padding-t20 block">
            <span ng-if="airport.rating == 5">
              <div class="relative inline-block">
                <img src="images/excellent-40x40.png" class="img-responsive padding-l15">
                <span class="clearfix darkgreen f-18"> Excellent</span>
              </div>
            </span>
            <span ng-if="airport.rating == 4">
              <div class="relative inline-block">
                <img src="images/very-good-40x40.png" class="img-responsive padding-l15">
                <span class="clearfix lightgreen f-18"> Very Good</span>
              </div>
            </span>
            <span ng-if="airport.rating == 3">
              <div class="relative inline-block">
                <img src="images/good-40x40.png" class="img-responsive padding-l15">
                <span class="clearfix yellow f-18"> Good</span>
              </div>
            </span>
            <span ng-if="airport.rating == 2">
              <div class="relative inline-block">
                <img src="images/poor-medium.png" class="img-responsive padding-l15">
                <span class="clearfix lightgreen f-18"> Poor </span>
              </div>
            </span>
            <span ng-if="airport.rating == 1">
              <div class="relative inline-block">
                <img src="images/very-poor-40x40.png" class="img-responsive padding-l15">
                <span class="clearfix lightgreen f-18"> Very Poor</span>
              </div>
            </span>
            <span ng-if="airport.rating == 0">
              <div class="relative inline-block">
                <img src="images/poor-40x40.png" class="img-responsive padding-l15">
                <span class="clearfix lightgreen f-18">Not Rated</span>
              </div>
            </span>
          </div>
        </div>
        <div class="col-md-4">
          <div class="box-button margin-t40">

            <button class="border-none white border-radius5 padding-tb10 padding-lr35
                bg_darkblue" data-toggle="modal" data-target="#ratingModel"
                ng-click="getRatingList(airport, 'airport')">
                Rating Chart
            </button>
          </div>
        </div>
      </div>
    </div><!-- end of content-box -->
  </div><!-- end of col-md-7 -->
</div>
</div>
<div class="notFound" ng-if="isNoRecordFound">
Not found any result
</div>
<span ng-if="selectedTab == 'Airport & Services'">
<dir-pagination-controls
     max-size="8"
     direction-links="true"
     boundary-links="true" 
     on-page-change="filterDataInRatingChart(newPageNumber, 'Airport')">
  </dir-pagination-controls>
</span>
</div>

Answer 1

如果要使“ 页面上更改”事件触发器在元素之间独立，那么可以使用“ pagination-id”。
下面是一个用法示例：
关于目录分页控件：

<dir-pagination-controls
 pagination-id="yourIdPagination"
 on-page-change="eventOnPageChange(newPageNumber)">
</dir-pagination-controls>

在表格/列表上，您的分页控件必须引用：

<table>
 <tr
  dir-paginate="item in items|filter:search|itemsPerPage:10"
  current-page="currentPage"
  pagination-id="yourIdPagination"
  total-items={{total_count}}>
   <td>{{item.Id}}</td>
 </tr>
</table>

例如，如果您在同一页面上有两个列表，并且每个列表都有自己的分页，则必须为每个列表设置一个不同的“ pagination-id”。该代码将是这样的：

<dir-pagination-controls
     pagination-id="firstIdPagination"
     on-page-change="eventOnPageChange(newPageNumber)">
    </dir-pagination-controls>

 <table>
    <tr
     dir-paginate="item in items|filter:search|itemsPerPage:10"
     current-page="currentPage"
     pagination-id="firstIdPagination"
     total-items={{total_count}}>
      <td>{{item.Id}}</td>
    </tr>
 </table>

<dir-pagination-controls
         pagination-id="secondIdPagination"
         on-page-change="eventOnPageChange(newPageNumber)">
        </dir-pagination-controls>

 <table>
        <tr
         dir-paginate="item in items|filter:search|itemsPerPage:10"
         current-page="currentPage"
         pagination-id="secondIdPagination"
         total-items={{total_count}}>
          <td>{{item.Id}}</td>
        </tr>
 </table>

同时如果您有2个或更多引用同一列表的“ dir-pagination-controls” ，则必须从另一个“ dir-pag”中删除“ on-page-change”事件pagination-controls”具有相同的“ pagination-id”，因为如果不这样做，该事件将触发2次或更多次。该代码将是这样的：

<dir-pagination-controls
             pagination-id="airportIdPagination"
             on-page-change="eventOnPageChange(newPageNumber)">
            </dir-pagination-controls>

 <table>
        <tr
         dir-paginate="item in items|itemsPerPage:10"
         current-page="currentPage"
         pagination-id="airportIdPagination"
         total-items={{total_count}}>
          <td>{{item.Id}}</td>
        </tr>
 </table>
<!--Notice that I've removed the event 'on-page-change' from the second one, because if not it would trigger twice-->
<dir-pagination-controls
             pagination-id="airportIdPagination">
            </dir-pagination-controls>

我希望这些例子能帮助您找出答案。

ng-click函数不能与Angular Js中的dir-pagination-controls一起使用？

1 个答案: