7

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?

laurent
  • 88,262
  • 77
  • 290
  • 428
user1012480
  • 752
  • 2
  • 11
  • 24

2 Answers2

13

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;
laurent
  • 88,262
  • 77
  • 290
  • 428
  • very true.Setting a variable works smoothly.Just call the function to variable and return true or false from that function.+1 for that – jayadevkv Apr 03 '17 at 11:26
2

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()"
Miller
  • 2,742
  • 22
  • 20
  • This seems to work with standalone functions, but not with methods. – savenkov Feb 25 '14 at 13:26
  • I can't get the wizard to render with the proper css styling. I am also using AngularJS. Can you help me with loading the appropriate css and js files ? And also how to render the wizard ? thanks. – bob.mazzo Jul 25 '14 at 03:32