NG-顯示不與NG-重複工作

Question

下面是我的表格標記

<tr ng-show="paginate({{$index+1}})" ng-repeat="x in ProductInfo_Pager | orderBy :sortType:sortReverse | filter:searchText | limitTo : rowPerPage" ng-class="$even?'table-danger':'table-info'"> 
        <td>{{$index+1}}</td> 
        <td>{{x.Product}}</td> 
        <td>{{x.Location}}</td> 
        <td>{{x.Qty}}</td> 
        <td>{{x.UnitPrice | currency : '&#x20B9;':2}}</td> 
        <td class="text-center"> 
         <i class="fa fa-flag" aria-hidden="true" style="color:red" />&nbsp;&nbsp;|&nbsp;&nbsp; 
         <i class="fa fa-bolt" aria-hidden="true" style="color:red" />&nbsp;&nbsp;|&nbsp;&nbsp; 
         <i class="fa fa-users" aria-hidden="true"></i> 
        </td> 
       </tr> 

和傳呼機下方

<ul class="pagination"> 
      <li class="page-item" ng-repeat="x in getNumber(rowPerPage) track by $index"> 
       <a class="page-link" ng-click="pagerIndex=$index+1">{{$index+1}}</a> 
      </li> 
     </ul> 

而且AngularJs代碼

$scope.ProductInfo_Pager = $scope.ProductInfo; 

     $scope.sortType = 'Product'; // set the default sort type 
     $scope.sortReverse = false; // set the default sort order 
     $scope.searchText = ''; // set the default search/filter term , 


     $scope.totalItems = $scope.ProductInfo.length; 
     $scope.currentPage = 1; 
     $scope.rowPerPage = 5; 
     $scope.pagerIndex = 1; 

     $scope.getNumber = function (num) { 

      var pages = $window.Math.ceil($scope.totalItems/num); 
      return new Array(pages); 
     } 

     $scope.paginate = function (rowindex) { 
      var begin, end, index, flag ; 
      index = $scope.pagerIndex; 
      end = (index * $scope.rowPerPage) - 1; // -1 to sync it with zero based index 
      begin = end - $scope.rowPerPage + 1; 
      if(rowindex >=begin && rowindex <= end){ 
       flag=true; 
      } 
      else{ 
       flag=false; 
      } 
      var d = 0; 
      return flag; 
     }; 

PAGINATE功能（）根據在ng-show in tr tag中使用的邏輯返回true或false，ng-repeat，但它不是如預期

邏輯荷蘭國際集團顯示，隱藏的功能是： 假設rowPerPage是5 - [5排可以同時在表中顯示]

而我們在尋呼機點擊4，所以應該從顯示的行16-20。

在ng-show paginate函數中，綁定以row index爲參數，此函數檢查rowindex是否落在16 - 20之間，如果是則返回true（ng-show=true）否則爲false，因此應該隱藏該行。

至於每畝瞭解它的雙向綁定，在NG-顯示任何改變應該很好地工作，但爲什麼會這樣

它不顯示任何效果 有人可以幫助我，我在angularjs

一個新手

謝謝。

Answer 1

好吧！ ng-show在這裏不起作用，函數根本不會被調用ng-show！

如果我正確理解你想創建一個分頁：

所以我用一個分頁過濾器給你分頁的一個非常簡單的解決方案。

你需要這個過濾器添加到您的應用程序：

app.filter('pagination', function() { 
return function(input, start) { 
    start = +start; //parse to int 
    if (input != undefined && Object.keys(input).length > 0) { 
     return input.slice(start); 
    } 

} 

}）;

在你的HTML：

<tr ng-repeat="x in ProductInfo_Pager | pagination: currentPage * rowPerPage | limitTo: rowPerPage|orderBy :sortType:sortReverse | filter:searchText" ng-class="$even?'table-danger':'table-info'"> 
       <td>{{$index+1}}</td> 
       <td>{{x.Product}}</td> 
       <td>{{x.Location}}</td> 
       <td>{{x.Qty}}</td> 
       <td>{{x.UnitPrice | currency : '&#x20B9;':2}}</td> 
       <td class="text-center"> 
        <i class="fa fa-flag" aria-hidden="true" style="color:red" />&nbsp;&nbsp;|&nbsp;&nbsp; 
        <i class="fa fa-bolt" aria-hidden="true" style="color:red" />&nbsp;&nbsp;|&nbsp;&nbsp; 
        <i class="fa fa-users" aria-hidden="true"></i> 
       </td> 
      </tr> 

在你見下表您的分頁UL：

<ul class="pagination"> 
<li class="page-item" ng-repeat="x in getNumber(rowPerPage) track by 
$index"> 
    <a class="page-link" ng-click="pagerIndex=$index+1">{{$index+1}} 
</a> 
</li> 
</ul> 

在你的控制器：

$scope.numberOfPages = function() { 
      if ($scope.ProductInfo_Pager != undefined) { 
       return Math.ceil($scope.ProductInfo_Pager.length/
        $scope.rowPerPage); 
      } 

     }; 

希望它的工作！如有任何疑問，請告訴我。