【问题标题】:How to perform a check on ng-disabled in angularjs?如何在 angularjs 中对 ng-disabled 执行检查?
【发布时间】:2013-06-09 15:14:45
【问题描述】:

我正在使用 fuelUX Wizard 和 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 绑定?

【问题讨论】:

    标签: javascript angularjs wizard fuelux


    【解决方案1】:

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

    ng-disabled="!canMoveForward"
    

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

    $scope.canMoveForward = false;
    

    【讨论】:

    • 非常正确。设置变量很顺利。只需调用函数到变量并从该函数返回真或假。+1 为那个
    【解决方案2】:

    我遇到了同样的问题,我发现问题出在! 运算符上。

    这失败了:

    ng-disabled="!canMoveForward()"
    

    但这会起作用:

    ng-disabled="canNotMoveForward()"
    

    【讨论】:

    • 这似乎适用于独立函数,但不适用于方法。
    • 我无法让向导使用正确的 css 样式进行渲染。我也在使用 AngularJS。你能帮我加载适当的 css 和 js 文件吗?以及如何渲染向导?谢谢。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多