选项1

Question

在我们的Angularjs应用程序中，我们动态设置所需的字段（ng-required）。因此，每次需要时都要在标签上添加*非常复杂。

现在我们有了另一个想法。可以根据需要标记输入字段本身。在this post中，我们找到了解决方案的一部分。

有必填字段的CSS选择器，因此我们可以为此设置背景图像：

input:required:valid {
  background-image: url(valid.png);
  background-position: right center;
  background-repeat: no-repeat;
}
input:required:invalid {
  background-image: url(invalid.png);
  background-position: right center;
  background-repeat: no-repeat;
  -moz-box-shadow: none;
}

<p>Name:</p>
<input type="text" name="name" required />

但是使用这种方式，我们需要一个*的背景图像，这似乎非常hacky。特别是，如果表格有不同的尺寸，那么图像有不同的分辨率。

比我们找到this (Section Labeled)示例，似乎可以将Text添加到输入字段。

所以问题是，如何将所有内容放在一起，以便我可以将一个glyphicon从twitter-bootstrap放到输入字段的右侧，如果需要这样做而不编辑所有表单？

她jsFiddle。这可能有用，但问题是，背景大小在任何地方都不是supported。

Answer 1

选项1

如Angularjs required asterisks中所述，您可以为所需属性添加指令，如下所示：

＆＃13;

var app = angular.module('stack', []);

app.directive("required", function() {
    return {
        restrict: 'A', // only for attributes
        compile: function(element) {
            // insert asterisk after elment 
            element.after("<span class='required'>*</span>");
        }
    };
});

＆＃13;

.required {
  color: red;
}

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.js"></script>

<div ng-app="stack">
  
  <input type="text" required />
  
</div>

＆＃13;

选项2

如Use CSS to automatically add 'required field' asterisk to form inputs中所述，使用背景图片也非常好：

＆＃13;

input[required], 
select[required]{
    background-image: url('http://i.imgur.com/zEIWMh4.png');
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 45px;
}

＆＃13;

<label>Name</label>
<input type="text" required /><br/>

＆＃13;

注意：您无法使用input:after在输入后创建伪元素，因为:before和:after {{3} }

使用glyphicon用css标记必填字段

1 个答案:

选项1

选项2