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

Question

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();
    }

score 5 · Answer 1 · answered Jul 24 '16 at 07:59

5

You should use angular expressions i.e., {{..}} inside html directives

eg.

<input value="{{sampleObj.attribute}}"/>

You should NOT use angular expressions i.e., {{..}} inside angular directives.

eg.

<input ng-value="sampleObj.attribute"/>

in your code, change your

ng-disabled="{{curPage == totalPage}}">

to

ng-disabled="curPage == totalPage">

answered Jul 24 '16 at 07:59

Anthony Green

51
2

Thanks for the explanation :) – Vivek Kumar Jul 24 '16 at 08:11
Exactly the opposite, adding the brackets, solved my problem. – Leopoldo Sanczyk Oct 06 '17 at 23:19

score 0 · Accepted Answer · answered Jul 24 '16 at 07:50

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>

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

2 Answers2