如何在angularjs中检查ng-disabled?

时间:2020-11-29 19:41:32

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

我正在使用fuelUX向导和Angularjs。我希望根据此控制器方法启用或禁用下一个按钮:

$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?

并且它工作正常,除非我从第二页返回到第一页:如果在第二页中禁用下一个按钮,即使在第一页上也是这样,除非我不在那里编辑表单。无论如何都要刷新ng-disabled绑定?

2 个解决方案

#1


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:

我猜AngularJS无法检查canMoveForward()的输出是否发生了变化。我发现对于这种事情,依赖范围变量更容易。你可以这样做:

ng-disabled="!canMoveForward"

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

然后在您的控制器中根据需要将属性设置为true / false:

$scope.canMoveForward = false;

#2


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

#1


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:

我猜AngularJS无法检查canMoveForward()的输出是否发生了变化。我发现对于这种事情,依赖范围变量更容易。你可以这样做:

ng-disabled="!canMoveForward"

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

然后在您的控制器中根据需要将属性设置为true / false:

$scope.canMoveForward = false;

#2


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