Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to perform a check on ng-disabled in angularjs?

I am using a fuelUX Wizard and Angularjs. I would like the next button to be enabled or disabled basing on this controller method:

$scope.canMoveForward = function(){
        switch($("#moduleWizard").wizard("selectedItem").step){
            case 1:
            //check if the module on the first step is valid*/  
                return $scope.validSelection && $scope.linkedPredicateForm.$valid;

            case 2:
            //check if the table is empty
                return !linkingDataSource.isEmpty();

            case 3:
                var enab= ($scope.saveModeForm.$valid && $scope.newSourceForm.$valid) || 
                ($scope.saveModeForm.$valid && $scope.appendSourceForm.$valid)
        }
    };

So indeed this is how I decleared the buttons:

<div class="actions">
                <button class="btn btn-mini btn-prev" ng-click="refresh()"> <i class="icon-arrow-left"></i>Prev</button>
                <button class="btn btn-mini btn-next" data-last="Finish"  id="wizard-next" ng-disabled="!canMoveForward()"
                        ng-click="handleStepResult()">
                    Next<i class="icon-arrow-right"></i></button>
            </div>

And it works fine, except when I get back from the second page to the first page: if the next button is disabled in the second page it will be this way even on the first page, unless I don't edit the form there. Is there anyway to refresh the ng-disabled binding?

like image 761
user1012480 Avatar asked Jun 13 '13 09:06

user1012480


People also ask

What is Ng-disabled in AngularJS?

The ng-disabled Directive in AngularJS is used to enable or disable the HTML elements. If the expression inside the ng-disabled attribute returns true then the form field will be disabled or vice versa. It is usually applied on the form field (i.e, input, select, button, etc).

What is ADD or condition in NG-disabled?

Or you can use ng-disabled="condition1 || condition2" , is depend of you logic conditional.

What is Ng checked?

Definition and Usage. The ng-checked directive sets the checked attribute of a checkbox or a radiobutton. The checkbox, or radiobutton, will be checked if the expression inside the ng-checked attribute returns true. The ng-checked directive is necessary to be able to shift the value between true and false .

Which of the following is true about Ng-disabled directive?

Q 9 - Which of the following is true about ng-disabled directive? A - ng-disabled directive can enable a given control.


2 Answers

I guess AngularJS cannot check if the output of canMoveForward() has changed or not. I found that for this kind of things it's easier to rely on scope variables. You could do something like this:

ng-disabled="!canMoveForward"

Then in your controller just set the property to true/false as needed:

$scope.canMoveForward = false;
like image 158
laurent Avatar answered Nov 11 '22 00:11

laurent


I have had the same problem and I've discovered that the problem is with the ! operator.

This fails:

ng-disabled="!canMoveForward()"

But this will work:

ng-disabled="canNotMoveForward()"
like image 38
Miller Avatar answered Nov 11 '22 00:11

Miller