与角JS

显示验证消息我在我的HTML代码中定义以下字段：与角JS

<label for="firstname" class="field prepend-icon" 
     ng-class="{ 'state-error': submitted && helpForm.firstname.$error.required }"> 
    <input type="text" name="firstname" id="firstname" required=""data-ng-model="firstname" 
     class="gui-input" placeholder="First name..."> 
    <label for="firstname" class="field-icon"><i class="fa fa-user"></i></label> 
</label> 
<span ng-show="{submitted && helpForm.firstname.$error.required}" 
      class="state-error">Enter first name</span>

这里是CSS类：

.smart-forms span.state-error { 
    display: block !important; 
    margin-top: 6px; 
    padding: 0 3px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-style: normal; 
    line-height: normal; 
    font-size: 0.85em; 
    color: #DE888A; 
}

验证的第一部分，效果很好。也就是说，我可以在发生验证错误时将类'状态错误'添加到标签。我使用的条件：

ng-class="{ 'state-error': submitted && helpForm.firstname.$error.required }

它工作正常。

但是，我试图使用'ng-show'的相同条件来隐藏错误消息，直到出现验证错误，但我无法隐藏它。这是负责它的代码行。

ng-show="{submitted && helpForm.firstname.$error.required}"

我也试过没有大括号像这样：

ng-show="submitted && helpForm.firstname.$error.required"

在这两种情况下，结果都是一样的。

因此，相同的条件可以添加一个类，但不能显示/隐藏元素，我错过了什么？

来源

2014-08-27 David Barel

remove {}？

NG秀=“{提交& & helpForm.firstname $ error.required。}

来源

2014-08-27 16:46:14 ABOS

感谢您的回复。我删除了大括号，但它没有帮助。其实我没有他们就开始了。 – 2014-08-27 17:51:46

你是对的。这里是来自角度文档。重写.ng-hide 默认情况下，.ng-hide类将使用display：none！重要的样式对元素进行样式设置。如果你想用ngShow/ngHide改变隐藏行为，可以通过在CSS中重新设置.ng-hide类的样式来实现： .ng-hide这是隐藏元素的另一种形式*/ 显示：block！important; position：absolute; top：-9999px; left：-9999px; } 默认情况下，您不需要在CSS中重写任何内容，并且动画将绕着显示样式工作。 – ABOS 2014-08-27 20:36:55

OK所以，问题是在CSS类

我已经定义：。

display: block !important;

我删除了这一行，问题解决了。不确定，但我猜ng-show使用

'display:none'

和我的CSS类重写它。无论如何，它现在起作用。所以如果你有同样的问题，一定要检查你的CSS类。

来源

2014-08-27 18:52:50

回答

相关问题