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?
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).
Or you can use ng-disabled="condition1 || condition2" , is depend of you logic conditional.
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 .
Q 9 - Which of the following is true about ng-disabled directive? A - ng-disabled directive can enable a given control.
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;
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()"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With