javascript - 如何在 Angular 中使用ng-if有条件地显示消息

Question

如果电子邮件地址已经注册或显示“感谢注册!”的消息，我会尝试向用户显示消息

表格 1:

<div>
    <button type="submit" data-target="#publisherVerification">Sign up</button>
</div>

<div id="publisherVerification" ng-if="flag===true">
    <div>
        <p>Thank you for signing up.</p>
    </div>
</div>

<div id="publisherVerification" ng-if="flag===false">
    <div>
        <p>User already registered. Please use login.</p>
    </div>
</div>

表格 2:

<div>
    <button type="submit"  data-target="#artistVerification">Sign up</button>
</div>

<div id="artistVerification" ng-if="flag === true">
    <div>
        <p>Thank you for signing up</p>
    </div>
    <div id="artistVerification" ng-if="flag === false">
        <div>
            <p>User already registered. Please use login.</p>
        </div>
    </div>
</div>

以上两种形式都在同一页面中，并且在单击按钮时调用相同的功能。

它的工作，但如果用户“已经注册或新用户”，两种形式都显示消息，因为他们正在调用相同的功能。如何仅显示特定表单的消息。我知道我可以为每个表单创建单独的函数，但我想尝试使用单个函数。

Answer 1

问题是两个 ng-if 都使用相同的标志。您需要区分艺术家标志和发布者标志。

此外，应该有一个标志，在开始时隐藏消息，只有在用户提交时才会显示。

为了解决这个问题，我向共享提交函数传递了一个用户参数。

<button type="submit" ng-click='submitForm( "publisher" )' data-target="#publisherVerification">Sign up</button>

<div id="publisherVerification" ng-if="submitted.publisher ===true">
   <div ng-if="flags.publisher===true">
     <p>Thank you for signing up.</p>
   </div>
   <div ng-if="flags.publisher===false">
      <p>User already registered. Please use login.</p>
    </div>
   </div>  
</div>

这是一个带有有效解决方案的 JSFiddle:https://jsfiddle.net/adamback42/x50kyh6n/4/