【问题标题】:Add an asterisk to a label if field is required如果需要字段,请在标签中添加星号
【发布时间】:2018-06-05 22:13:21
【问题描述】:

我有一个标签,如果需要字段,我想添加一个星号。我试过像这样申请ng-class

<div class="col-xs-12 top5"  ng-if="(activity.itemType=='TEXTAREA')">
     <label class="col-xs-3 control-label text-right" for="act4{{$index}}"
            ng-class="{'asterisk-if-mandatory': data[$index].mandatory}">{{activity.itemLabel}}</label>
     <div class="col-xs-9">
         <textarea ng-model="activityItems[$index].value"
                   ng-required="data[$index].mandatory" cols="40" rows="6"
                   id="act4{{$index}}" name="txtComments" class="defaultTextareaInput"></textarea>
     </div>
</div>

然后是css

.asterisk-if-mandatory {
    content: " *"
}

有什么解决办法吗?

【问题讨论】:

  • 因为我不知道 angular...ng-class="{'asterisk-if-mandatory': data[$index].mandatory}" 的渲染输出是什么?
  • 把它放在后面:.asterisk-if-mandatory:after { content: " *"; display:inline-block; } 如果你的 ng 类被应用了
  • 好东西@Pete!

标签: javascript html css angularjs


【解决方案1】:

我真的不知道 Angular……
但我想说你可以做这样的事情,使用伪元素::after

label {
  border: 1px solid gray;
  padding: 4px 8px;
}

label.asterisk-if-mandatory::after {
  content: " *";
}
<label class="asterisk-if-mandatory">Item is mandatory</label>
<label class="">Item is not mandatory</label>
<label class="asterisk-if-mandatory">Item is mandatory</label>

(我将代码减少到sn-p所需的最低限度)

【讨论】:

  • 有点帮助 - {'asterisk-if-mandatory': data[$index].mandatory} 的 ng 类将动态添加一个标准 CSS 类 asterisk-if-mandatorydata[$index].mandatory 是真实的。所以,要关注的类是asterisk-if-mandatory....
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-04-04
  • 1970-01-01
  • 2020-03-10
  • 1970-01-01
  • 2014-06-02
相关资源
最近更新 更多