ng-class 行为不正常

Question

我有以下带有 ng-repeat 和 ng-class 的代码行：

<div ng-repeat="invitee in invitedCollaborators" class="invite-collabs-emails">
     <input type="text" id="email-{{$index}}" validate-email="email.invalid" ng-class="{'collabs-email-required' : ((invitedCollaborators[{{$index}}].email == null || invitedCollaborators[{{$index}}].email ==''))}" class="collabs-email" placeholder="Enter email here" ng-required="true" ng-model="invitee.email"/>
     <a href ng-click="removeInvitee($index)" class="delete-invite">
       <img src="delete-invite.png">
     </a>
    </div>
<a href class="add-another-collabs-link" ng-click="addAnotherCollaborator()">Add another</a>

ng-repeat 在我们添加另一个输入框时重复输入框。 ng-class 有这个条件语句来添加 collabs-email-required 类，它添加红色边框颜色以显示需要输入。

现在我面临的问题是，当我添加多个输入框并在所有输入框中输入有效的电子邮件，然后删除其中一个输入框时，其他输入框显示红色边框颜色，即使它们有有效的电子邮件身份证。

我尝试在 ng-class 中添加三元运算符以使其工作：

ng-class="{'collabs-email-required' : ((invitedCollaborators[{{$index}}].email == null || invitedCollaborators[{{$index}}].email =='')) ? 'collabs-email'}

上面的问题得到了解决，但是当它失去焦点时输入框不显示红色边框。当它失去焦点并且没有填充有效的 id（或根本没有填充）时，它应该有红色边框。

我缺少什么条件？请帮忙。谢谢

Answer 1

试试这个

  <div ng-repeat="invitee in invitedCollaborators" class="invite-collabs-emails">
         <input type="text" id="email-{{$index}}" validate-email="email.invalid" ng-class="{'collabs-email-required' : ((invitedCollaborators[$index].email == null || invitedCollaborators[$index].email ==''))}" class="collabs-email" placeholder="Enter email here" ng-required="true" ng-model="invitee.email"/>
         <a href ng-click="removeInvitee($index)" class="delete-invite">
           <img src="delete-invite.png">
         </a>
        </div>
    <a href class="add-another-collabs-link" ng-click="addAnotherCollaborator()">Add another</a>