Legion Legion - 6 months ago 21
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

<p>
tag Visual Studio complains that it's invalid to place a
<p>
tag inside a
<label>
.

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


Similarly if I try using a
<div>
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
ng-if
on the
<label>
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?

Answer

You should use <span> instead of <div>

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

then you can customize your element with some CSS.

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