ng-click function is not working with dir-pagination-controls in Angular Js?

Question

I have implemented the pagination in our website on differs tabs and it is working properly but problem is that after switch the tab we have called another function for get list but simultaneously on-page-change will be trigger every time.i used ng-click it is trigger but not Woking properly tell me, anyone, how to fix this problem?

<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>

could you provide code for `dir-pagination-controls` component? There is nothing wrong about the code I see atm — Majesty, Dec 28 '18 at 08:04

Ray Soy · Answer 1 · 2018-12-28T09:30:45.847

If you want to keep the 'on-page-change' event trigger independent between the elements, than you could use 'pagination-id'.
Here a possible example of usage:
On dir-pagination-controls:

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

On table/list your pagination control have to referring:

<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>

So for example if you have two lists on the same page and every list has a own pagination you have to set a different 'pagination-id' for each list. The code would be something like this:

<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>

Meanwhile if you have 2 or more 'dir-pagination-controls' referring to the same list list you've to remove the 'on-page-change' event from the other 'dir-pagination-controls' with the same 'pagination-id' because if not the event would trigger 2 or more times. The code would be something like this:

<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>

I hope those examples help you to figure out.

'pagination-id' is an attribute like the attribute 'id' on html. Usually I'm setting it directly in the html. So for example you can replace 'yourIdPagination' with something like 'IdForFirstList' on the 'dir-pagination-controls' that refers to the first list and 'IdForSecondList' on the 'dir-pagination-controls' that refer to the second list. I'm supposing than you can set it dynamically throught a variable in your scope as well. — Ray Soy, Dec 28 '18 at 09:01
sir check my updated fiddle i will change dir-pagination-controls via pagination-id but same problem function is trigger again after switch the tab ? — Kapil Soni, Dec 28 '18 at 09:06
sir, i will check above code but i have assigned the different pagination-id on the different dir-pagination-controls and i have trigger different API after switch the tab so eventOnPageChange is not possible ? — Kapil Soni, Dec 28 '18 at 09:56
If on switch the tab your html is rendered again every time, then 'on-page-change' event is triggered every time you change the tab(But why would this be a problem?). But I this case would be nice to have a working example of your issue. — Ray Soy, Dec 28 '18 at 10:09
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/185875/discussion-between-kapil-soni-and-ray-soy). — Kapil Soni, Dec 28 '18 at 10:12

ng-click function is not working with dir-pagination-controls in Angular Js?

1 Answers1