Question

我想根据函数的结果在跨度上设置3个不同类中的1个。我的下面的javascript似乎返回正确的值，但是我的标记总是显示'require-matched'类。如何编写ng-class指令以适应这种情况？

HTML：

<span ng-class="{'require-empty': 0,
                                 'require-matched': 1,
                                 'require-not-matched':2 [form.username.$validators.status]}">
                </span>

JS：

ctrl.$validators.status = function (value) {
                var expression = /^[-\w]+$/;

                if (value != null && value != undefined && value != '' && value != ' ') {
                    if (expression.test(value))
                        return 1;
                    if (!expression.test(value))
                        return 2;
                }
                else {
                    return 0;
                }
}

Answer 1

这是Angular中验证的错误用法。 ctrl.$validators.status应该返回布尔值：true以获得有效结果（在您的术语中为required-matched）和false否则（required-not-match）。如果验证无效，ngModelController将收到布尔标志，您可以在其中使用样式控件或显示错误消息。

您拥有的{p> require-empty应该由required验证工处理，而不是让status验证工具执行此操作。

那么你可能想要的是：

ctrl.$validators.status = function(value) {
    if (value) {
        var expression = /^[-\w]+$/;
        return expression.test(value.trim());
    }
    return false;
}

或指令可以像

一样简洁

ctrl.$validators.status = function(value) {
    return value && /^[-\w]+$/.test(value.trim());
}

HTML中的对应字段（假设指令名称为status）：

<input type="text" name="test" ng-model="testModel" status required>

<div class="error" ng-show="testForm.test.$error.required">The field is required.</div>
<div class="error" ng-show="testForm.test.$error.status">The value should match pattern.</div>

演示： http://plnkr.co/edit/YALB4Vbi5FzNH5FCfwB5?p=preview

使用具有多个条件的ng-class

1 个答案: