Question

我正在尝试向用户显示一条消息，如果电子邮件地址已经注册或者消息说“＃34;感谢您注册！＆＃34;

表格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>

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

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

Answer 1

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

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

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

<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/

Answer 2

使用不同的对象来显示不同的消息，例如：set publisherVerification.flag = true，当publisherVerification成功注册时，设置publisherVerification.flag = false;

类似于artist验证当artistVerification成功注册时使用artistVerification.true，否则为artistVerification.flag设置false;

这将有助于您将publisherVerification和artistVerification的代码分开，这样更清晰。

如何使用ng-if有条件地显示消息

2 个答案: