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类，该类添加红色边框颜色以显示需要输入。

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

我尝试在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>

ng-class表现不正常

1 个答案: