Auf welches HTML-Element sollte ich ng-if setzen?

Question

Ich versuche, Sternchen (*) neben erforderlichen Feldern basierend auf einem booleschen Wert zu platzieren.

Wenn ich es mit einem <p> Tag Visual Studio beklagt, dass es ungültig ist, ein <p> Tag innerhalb einer <label> zu platzieren.

<label>Title: <p ng-if="titleRequired">*</p></label> 

Ebenso, wenn ich stattdessen ein <div> versuchen verwenden, erhalte ich eine ähnliche Beschwerde, die divs kann nicht innerhalb eines Etiketts angebracht werden.

<label>Title: <div ng-if="titleRequired">*</div></label> 

Wenn ich stelle die ng-if auf dem <label> ich in das Problem laufen in rot das Sternchen zu wollen, aber das Etikett Text in Standard-Schwarz.

<label ng-if="titleRequired">Title: *</label> 

Ich kann versuchen, mit einem Schriftart-Tag umgehen, aber es ist veraltet.

<label ng-if="titleRequired">Title: <font color="red">*</font></label> 

All dies wird in Chrome machen, aber ich möchte gültig Markup wenn möglich verwenden. Gibt es eine Möglichkeit, dies mit gültigem Markup zu tun?

Answer 1

sollten Sie <span> anstelle von <div>

<label>Title: <span ng-if="titleRequired">*</span></label> 

dann können Sie Ihr Element mit einigen CSS anpassen.

<style> 
    span { color: #FF0000; } 
</style>