ng-required输入后的红色星号（无标签）

Question

我正在寻找一条CSS规则，在带有ng-required属性的输入后应用红色星号。

问题是，这些输入上没有标签，占位符用作标签。

这两个输入例如：

<div class="row">
    <div class="col-xs-6">
        <input type="text" name="CACLastName" ng-model="cac.lastName" placeholder="NOM" ng-required="true" ng-disabled="$parent.isDisabled" class="form-control"/>
    </div>
    <div class="col-xs-6">
        <input type="text" name="CACFirstName" ng-model="cac.firstName" placeholder="Prénom" ng-required="true" ng-disabled="$parent.isDisabled" class="form-control"/>
    </div>
</div>

所以我尝试使用:after，但没有成功。此外，:required仅适用于required属性，而不适用于ng-required。

Answer 1

我尝试了CSS，并且选择器似乎根本不适用于输入元素，而它适用于div元素。您可以尝试以下操作，您会看到在div之后而不是在input之后插入星号：

<div class="row">
    <div class="col-xs-6">
        <input type="text" name="CACLastName" ng-model="cac.lastName" placeholder="NOM" ng-required="true" ng-disabled="$parent.isDisabled" class="form-control"/>
    </div>
    <div class="col-xs-6">
        <input type="text" name="CACirstName" ng-model="cac.firstName" placeholder="Prénom" ng-required="true" ng-disabled="$parent.isDisabled" class="form-control"/>
    </div>
</div>

<div class="text-div" ng-required="true">
  TEST DIV LOOK -->
</div>

CSS：

[ng-required]:after {
  content: "*"
}

输出：

Jsfiddle live example of problem

在我看来，这是javascript的工作。使用您的html，此代码将起作用（本机JS）：

var form_inputs = document.getElementsByClassName('form-control')

for ( var i = 0; i < form_inputs.length; i ++ ) {
    if ( form_inputs[i].hasAttribute('ng-required') ) {
    form_inputs[i].insertAdjacentHTML('afterend', '<span style='color: red;'>*</span>');
  }
}

Jsfiddle solution