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

荒凉一梦 提交于 2019-12-12 07:57:49

问题


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?


回答1:


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;



回答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()"


来源:https://stackoverflow.com/questions/17083623/how-to-perform-a-check-on-ng-disabled-in-angularjs

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!