Wie kann ich Nachrichten mit ng-if in eckig anzeigen?

Question

Ich versuche dem Benutzer eine Nachricht anzuzeigen, wenn die E-Mail-Adresse bereits registriert ist oder die Nachricht "Thanks for signing up!"

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

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

Beide oben genannten Formen in der gleichen Seite sind und die gleiche Funktion auf Tastenklick aufrufen.

Es funktioniert, aber beide Formen zeigen Nachrichten an, wenn der Benutzer "bereits registriert oder neuer Benutzer" ist, weil sie die gleiche Funktion aufrufen. Wie zeige ich nur Nachrichten für bestimmte Formulare an? Ich weiß, dass ich separate Funktion für jedes Formular erstellen kann, aber ich möchte es mit einzelner Funktion versuchen.

Answer 1

Das Problem ist, dass beide ng-ifs die gleichen Flags verwenden. Sie müssen zwischen der Künstlerflagge und der Verlegerflagge unterscheiden.

Außerdem sollte es eine Flagge geben, die die Nachricht am Anfang verbirgt und nur aufdeckt, wenn der Benutzer gesendet hat.

Um dies zu lösen, übergab ich einen Benutzerparameter an die gemeinsame Übergabefunktion.

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

Hier ist ein JSFiddle mit einer Arbeitslösung: https://jsfiddle.net/adamback42/x50kyh6n/4/

Answer 2

Verwenden Sie ein anderes Objekt, um verschiedene Nachrichten anzuzeigen, zB: set publisherVerification.flag = true, wenn die publisherVerification für die Registrierung erfolgreich ist, sonst set publisherVerification.flag = false;

ähnlich für den artistVerification Verwenden Sie artistVerification.true, wenn artistVerification für die Registrierung erfolgreich ist, sonst set false für artistVerification.flag;

Dies wird Ihnen helfen, Ihren Code für PublisherVerification und ArtistVerification zu trennen, die viel sauberer ist.