Verwenden Sie Glyphicon, um das erforderliche Feld mit CSS zu markieren - CSS, AngularJS, Twitter-Bootstrap

In unserer Angularjs-Anwendung setzen wir die erforderlichen Felder dynamisch (ng-required). Daher ist es ziemlich kompliziert, eine * zu dem Etikett jedes Mal, wenn es erforderlich ist.

Jetzt haben wir eine andere Idee. Es kann möglich sein, das Eingabefeld selbst als erforderlich zu markieren. Im dieser Beitragfanden wir einen Teil der Lösung.

Es gab CSS-Selektoren für ein erforderliches Feld, so dass wir ein Hintergrundbild dafür setzen können:

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 />

Auf diese Weise benötigen wir jedoch ein Hintergrundbild von *Und das scheint sehr abgedreht zu sein. Insbesondere wenn es unterschiedliche Größen des Formulars gibt, hat das Bild unterschiedliche Auflösungen.

Dann haben wir gefunden dies (Abschnitt beschriftet) Beispiel und es scheint möglich zu sein, Text in das Eingabefeld einzufügen.

Die Frage ist also, wie ich das alles zusammenfassen kann, damit ich ein Glyphicon von Twitter-Bootstrap auf die rechte Seite eines Eingabefelds setzen kann, wenn dies erforderlich ist, ohne alle meine Formulare zu bearbeiten.

Ihr a jsFiddle. Das könnte funktionieren, aber das Problem ist, dass die Hintergrundgröße nicht stimmt unterstützt überall.

Antworten:

Wie in. Erwähnt Angularjs benötigt Sternchenkönnen Sie eine Direktive für das erforderliche Attribut wie folgt hinzufügen:

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>");
}
};
});

.required {
color: red;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.js"></script>

<div ng-app="stack">

<input type="text" required />

</div>

Option 2

Wie in. Erwähnt Verwenden Sie CSS, um automatisch das Sternchen "Erforderliches Feld" hinzuzufügen, um Eingaben zu bilden, mit Hintergrundbild ist auch völlig in Ordnung:

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

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

Hinweis: Sie kann nicht benutzen input:after um ein Pseudoelement nach der Eingabe zu erstellen, weil :before und :after "gerendert werden, befinden sich im Container selbst als untergeordnetes Element und input kann keine anderen Elemente enthalten, daher "nicht unterstützt"