Question

我想根据Angular中表单的状态切换按钮类。该模板基于Bootstrap。

我已经设置了一个名为IsDirty的指令。

如果表单的类为“ng-valid”，请将“btn-success”类添加到“提交”按钮。

或者，如果表单很脏并且类别为“ng-dirty”，请从提交按钮中删除“btn-success”类。

到目前为止，这是我所拥有的，但它不起作用。

var angular = require('angular');

angular.module('myApp')
    .directive('isDirty', [function() {
        return {
            restrict: 'E',
            link: function(scope, element, attrs, ctrl) {
                var submitButton = element.find('.btn-primary');

                if(element.hasClass('ng-valid')) {
                        submitButton.addClass('btn-success');
                } else {
                    submitButton.removeClass('btn-success');
                }

                scope.$apply();             
            }
        };
    }]);

我的表格：

<form is-dirty class="form-horizontal" role="form" name="profileForm">

    <!-- INPUT FIELDS HERE //-->

    <button type="submit" class="btn btn-primary">Save Changes</button>
    <button type="reset" class="btn btn-default">Cancel</button>
</form>

Answer 1

这应该有希望解决你的问题

.directive('ngDirty', [function() {
        return { 
            restrict: 'AE',
            link: function(scope, element, attrs, ctrl) {
                var submitButton = element[0].querySelector('.btn-primary');
                if(element.hasClass('ng-valid')) {
                        submitButton.classList.add("btn-danger");
                } else {
                    submitButton.classList.remove("btn-danger");
                }            
            }
        };
    }]);

Plnkr Example

<强>更新

它有点脏，但似乎工作并检查每个输入，你必须将每个输入绑定到ng模型，尽管我已经使用$scope.input

New Plnkr

第二次更新

我已删除该功能并带来$ timeout，您将从示例中看到它是如何工作的。

New update with a $timeout as function

Answer 2

请使用ngClass（顺便说一下，我对您的班级名称感到困惑。在您的说明中，您说要添加/删除班级.btn-success，但在您添加/删除{{1}的代码中所以在下面的代码中，我坚持使用.btn-danger）：

.btn-success

在你的指令中：

<form is-dirty class="form-horizontal" role="form" name="profileForm">
    <!-- INPUT FIELDS HERE //-->

    <button type="submit" 
            class="btn btn-primary" 
            ng-class="{'btn-success' : isValid}">
            Save Changes
    </button>

    <button type="reset" class="btn btn-default">Cancel</button>
</form>

我会进一步建议您实际使用var angular = require('angular'); angular.module('myApp') .directive('form', [function() { return { restrict: 'EA', link: function(scope, element, attrs, ctrl) { scope.isValid = element.hasClass('ng-valid'); } }; }]);创建课程ng-valid，并使用变量ng-class在scope.isValid和ng-valid之间进行更改。< / p>

使用Angular中的Directive切换按钮类

2 个答案: