Legion Legion - 10 months ago 43
HTML Question

On which HTML element should I place ng-if?

I'm trying to place asterisks (*) next to required fields based on a boolean value.

If I do it with a

tag Visual Studio complains that it's invalid to place a
tag inside a

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

Similarly if I try using a
instead, I get a similar complaint that divs can't be placed inside of a label.

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

If I place the
on the
I run into the problem of wanting the asterisk in red but the label text in standard black.

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

I can try getting around that with a font tag but it's obsolete.

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

All of these will render in Chrome, but I'd like to use valid markup if possible. Is there a way to do this with valid markup?


You should use <span> instead of <div>

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

then you can customize your element with some CSS.

    span { color: #FF0000; }