如何在AngularJS中执行ng-disabled的检查？

Question

我正在使用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)
        }
    };

实际上，这就是我如何声明按钮的方式：

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

除了当我从第二页回到第一页时，它能很好的工作，但如果第二页中的下一页按钮被禁用了，即使在第一页上也会保持这种状态，除非我在那里编辑表单。是否有一种方式可以刷新ng-disabled绑定？

- user1012480

Answer 1

我猜AngularJS无法检查canMoveForward()的输出是否已更改。 我发现对于这种情况，更容易依赖作用域变量。 您可以执行以下操作：

ng-disabled="!canMoveForward"

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

$scope.canMoveForward = false;

- laurent

---

非常正确。设置变量非常顺畅。只需调用函数到变量并从该函数返回true或false。为此加1分。 - jayadevkv

Answer 2

我曾经遇到过同样的问题，发现问题出在!操作符上。

以下代码无法正常运行：

ng-disabled="!canMoveForward()"

但是这将有效：

ng-disabled="canNotMoveForward()"

- Miller

---

这似乎适用于独立函数，但不适用于方法。 - savenkov

我无法让向导使用正确的 CSS 样式进行渲染。我还在使用 AngularJS。 你能帮我加载适当的 CSS 和 JS 文件吗？还有如何渲染向导？ 谢谢。 - bob.mazzo