dearvivekkumar dearvivekkumar - 4 months ago 15
AngularJS Question

ng-disable is not upadting upon the change of variable used in the expression

I'm trying to enable/disable a button on the basis of an expression, as in the code below.

But the button is not enabling again whenever the value of

curPage
variable changed.

How to handle this case in angularjs?

<button
id="prevPage"
ng-click="prevPageBtnClicked($event)"
ng-disabled="{{curPage == 1}}">
Previous
</button>


<button
id="nextPage"
ng-click="nextPageBtnClicked($event)"
ng-disabled="{{curPage == totalPage}}">
Next
</button>


Update 1: controller code

var myController = app.controller("mainCtrl", function($scope, $http) {

$scope.logs = {};
$scope.curPageLogs = {};
$scope.itemPerPage = 15;
$scope.curPage = 1;

...

$scope.nextPageBtnClicked = function(event) {
if ($scope.curPage < $scope.totalPage) {
$scope.curPage += 1;
}
$scope.generateCurPageLogs();
}



$scope.prevPageBtnClicked = function(event) {
if ($scope.curPage > 1) {
$scope.curPage -= 1;
}
$scope.generateCurPageLogs();
}

Answer

Remove the {{ }}. Conditional code in ng-if, ng-disabled etc does not require curly braces. Its recommended to use ===.

<button
    id="prevPage" 
    ng-click="prevPageBtnClicked($event)" 
    ng-disabled="curPage === 1">
        Previous
</button>


<button
    id="nextPage" 
    ng-click="nextPageBtnClicked($event)" 
    ng-disabled="curPage === totalPage">
        Next
</button>
Comments