使用angularjs根据输入值显示或隐藏分页图标

Question

我正在使用angularjs来建立分页。它有一个文本框（直接输入页面值）＆＃39;和＆＃39; next＆＃39;和＆＃39; prev＆＃39;图标，

应根据输入页面值显示和隐藏图标。

这是我的代码，

HTML

 <input type="text" ng-model="currentPage1" value=""/>                          
 <a href="javascript:void(0);" ng-hide="prevPageDisabled()" ng-click="prevPage();"> <img src="img/previous.png" /></a>
 <a href="javascript:void(0);" ng-hide="nextPageDisabled()" ng-click="nextPage();"> <img src="img/next.png" /></a>

控制器

$scope.currentPage1 = 1;
$scope.itemsPerPage1 = 10;    

$scope.pageCount = function() {      
      return Math.ceil($scope.results.length/$scope.itemsPerPage1);
    };
$scope.nextPage = function() {     
      if ($scope.currentPage1 < $scope.pageCount()) {        
        $scope.currentPage1++;
      }
    };

    $scope.prevPage = function() {
      if ($scope.currentPage1 > 0) {        
        $scope.currentPage1--;
      }
    };
    //prev page disabled
    $scope.prevPageDisabled = function() {      
      return $scope.currentPage1 === 1 ? "true" : "";
    };
    //next page disabled
    $scope.nextPageDisabled = function() {      
      return $scope.currentPage1 === $scope.pageCount() ? "true" : "";
    };

Answer 1

在编译范围时，在代码prevPageDisabled和nextPageDisabled函数中调用一次。后续的nextPage和prevPage调用不会产生prevPageDisabled和nextPageDisabled个函数值。

您需要的是直接将条件绑定到范围变量。而不是进行函数调用：

<input type="text" ng-model="currentPage1" value=""/>                          
 <a href="javascript:void(0);" ng-hide="currentPage1 === 1" ng-click="prevPage();"> <img src="img/previous.png" /></a>
 <a href="javascript:void(0);" ng-hide="currentPage1 === pageCount" ng-click="nextPage();"> <img src="img/next.png" /></a>