在 Angular 中使用带有 OR 和 NOT 条件的 ng-show

Question

是否可以根据两个条件使用 ng-show，我想在这种情况下有 3 个条件。我知道我可能可以使用函数或指令来执行此操作，但这是在使用 ng-repeat 加载视图并将数据传播到动态生成的表单元素时。此时将条件添加到 ng-show 会更容易，因为实际输入未标记为无效并且表单本身仍将提交为有效。当表单首次加载动态创建的表单中的最后一个元素时，会显示错误消息，就好像它是无效的，直到 $touched = true 并且 $veiwValue 发生变化。

为简单起见，我的 ng-show 如下所示：

<div class="list-help-block" ng-messages="emails_form.email.$error" ng-show="emails_form.email.$dirty || emails_form.email.$invalid">
    <div ng-messages-include="/app/views/messages.html" ></div>
</div>

这会在无效条目和提交表单时显示错误消息。但是，它还会在加载表单时显示错误消息（甚至不应该有错误）。并且只是在动态添加到表单的最后一个输入上。

我想做的是这样的：

ng-show="emails_form.email.$dirty || emails_form.email.$invalid NOT mails_form.email.$pristine"

我什至不知道这是否可行，或者是否可以在视图完全加载且数据已添加到模型后调用函数来修复验证。有什么建议吗？

这是用于此的整个部分：

<div ng-repeat="emails in info.instructor.instructor_emails">
    <ng-form name="emails_form" novalidate>
        <div class="input-group">
            <span class="input-group-label">
            <span ng-show="info.instructor.instructor_emails.length==1">@</span>
            <span ng-show="info.instructor.instructor_emails.length>=2"><a ng-click="updateRemoveEmail($index)"><i class="fi-x"></i></a></span>
        </span>                                             
    <input ng-class="{ notvalid: submitted && emails_form.email.$invalid }"type="email" placeholder="jane.doe@example.com" name="email" ng-model="emails.email" ng-required="info.instructor.instructor_emails.length>=2"/>
    </div>
    <div class="list-help-block" ng-messages="emails_form.email.$error" ng-if="!emails_form.email.$pristine && (emails_form.email.$dirty || emails_form.email.$invalid)">
    <div ng-messages-include="/app/views/messages.html" ></div>
</div>

Answer 1

作为建议，我建议您使用 ngIf 而不是 ngShow 作为一个好的做法。

据我了解你的 NOT，它应该有效：

ng-if="!emails_form.email.$pristine && (emails_form.email.$dirty || emails_form.email.$invalid)"

Answer 2

这个有效：

<div class="list-help-block" ng-messages="emails_form.email.$error" ng-if="  (!emails_form.email.$pristine && (emails_form.email.$dirty || emails_form.email.$invalid)) || (emails_form.email.$pristine && emails_form.email.$error.required) ">
    <div ng-messages-include="/app/views/messages.html" ></div>
</div>

它很丑，但可以满足我的需要。感谢 @developer033 为我指明了正确的方向。下次我将为所有这些垃圾代码使用自定义指令

在 Angular 中使用带有 OR 和 NOT 条件的 ng-show

Using ng-show in Angular with an OR and NOT condition

javascript

angularjs

angularjs-ng-form